feat(org-chart): add core cards and fixed-layout integration

packages/org-chart/src/styles/design-tokens.css

@@ -0,0 +1,68 @@
+/* Standalone OrgChart design defaults. No HM Theme dependency.
+   Only the six organization header gradients were measured in Workdesk.
+   Neutral surfaces, card styling, typography and geometry are independent
+   design adaptations, not verified official Workdesk values.
+   Public --hm-orgchart-* inputs are intentionally NOT declared here: host
+   overrides must inherit through the Shadow DOM. Resolve defaults locally. */
+.hm-orgchart-shell {
+  --hm-orgchart-resolved-bg-surface: var(--hm-orgchart-bg-surface, #ffffff);
+  --hm-orgchart-resolved-bg-content: var(--hm-orgchart-bg-content, #f4f7fb);
+  --hm-orgchart-resolved-bg-subtle: var(--hm-orgchart-bg-subtle, #e9edf3);
+  --hm-orgchart-resolved-bg-brand: var(--hm-orgchart-bg-brand, linear-gradient(180deg, #45639f 0%, #809dd7 100%));
+  --hm-orgchart-resolved-fg-primary: var(--hm-orgchart-fg-primary, #10243b);
+  --hm-orgchart-resolved-fg-secondary: var(--hm-orgchart-fg-secondary, #596575);
+  --hm-orgchart-resolved-stroke-default: var(--hm-orgchart-stroke-default, #bac7d7);
+  --hm-orgchart-resolved-stroke-input-default: var(--hm-orgchart-stroke-input-default, #d3dce8);
+  --hm-orgchart-resolved-stroke-input-focus: var(--hm-orgchart-stroke-input-focus, #45639f);
+  --hm-orgchart-resolved-accent: var(--hm-orgchart-accent-color, #eef2fa);
+  --hm-orgchart-resolved-on-accent: var(--hm-orgchart-on-accent, #224387);
+  --hm-orgchart-resolved-action-primary: var(--hm-orgchart-action-primary, #45639f);
+  --hm-orgchart-resolved-on-action-primary: var(--hm-orgchart-on-action-primary, #ffffff);
+  --hm-orgchart-resolved-font-family: var(--hm-orgchart-font-family, 'Noto Sans KR', 'Malgun Gothic', Arial, sans-serif);
+  --hm-orgchart-resolved-font-weight-bold: var(--hm-orgchart-font-weight-bold, 700);
+  --hm-orgchart-resolved-font-weight-medium: var(--hm-orgchart-font-weight-medium, 500);
+  --hm-orgchart-resolved-radius-container: var(--hm-orgchart-radius-container, 4px);
+  --hm-orgchart-resolved-radius-control-md: var(--hm-orgchart-radius-control-md, 4px);
+  --hm-orgchart-resolved-radius-pill: var(--hm-orgchart-radius-pill, 999px);
+
+  --hm-orgchart-resolved-spacing-xs: var(--hm-orgchart-spacing-xs, 4px);
+  --hm-orgchart-resolved-spacing-sm: var(--hm-orgchart-spacing-sm, 8px);
+  --hm-orgchart-resolved-spacing-md: var(--hm-orgchart-spacing-md, 12px);
+  --hm-orgchart-resolved-spacing-lg: var(--hm-orgchart-spacing-lg, 16px);
+  --hm-orgchart-resolved-spacing-xl: var(--hm-orgchart-spacing-xl, 20px);
+  --hm-orgchart-resolved-spacing-xxl: var(--hm-orgchart-spacing-xxl, 24px);
+  --hm-orgchart-resolved-border-width: var(--hm-orgchart-border-width, 1px);
+  --hm-orgchart-resolved-border-top-width: var(--hm-orgchart-border-top-width, 3px);
+  --hm-orgchart-resolved-font-size-title: var(--hm-orgchart-font-size-title, 24px);
+  --hm-orgchart-resolved-font-size-base: var(--hm-orgchart-font-size-base, 13px);
+  --hm-orgchart-resolved-font-size-person: var(--hm-orgchart-font-size-person, 13px);
+  --hm-orgchart-resolved-font-size-meta: var(--hm-orgchart-font-size-meta, 10px);
+  --hm-orgchart-resolved-card-width-employee: var(--hm-orgchart-card-width-employee, 114px);
+  --hm-orgchart-resolved-card-width-leader: var(--hm-orgchart-card-width-leader, 154px);
+  --hm-orgchart-resolved-card-width-top-leader: var(--hm-orgchart-card-width-top-leader, 155px);
+  --hm-orgchart-resolved-card-height-employee: var(--hm-orgchart-card-height-employee, 54px);
+  --hm-orgchart-resolved-card-height-leader: var(--hm-orgchart-card-height-leader, 72px);
+  --hm-orgchart-resolved-card-height-top-leader: var(--hm-orgchart-card-height-top-leader, 78px);
+
+  --hm-orgchart-resolved-table-background: var(--hm-orgchart-table-background, var(--hm-orgchart-resolved-bg-surface));
+  --hm-orgchart-resolved-table-text: var(--hm-orgchart-table-text, var(--hm-orgchart-resolved-fg-primary));
+  --hm-orgchart-resolved-table-font-size: var(--hm-orgchart-table-font-size, 12px);
+  --hm-orgchart-resolved-table-line-height: var(--hm-orgchart-table-line-height, 18px);
+  --hm-orgchart-resolved-table-cell-padding-x: var(--hm-orgchart-table-cell-padding-x, 8px);
+  --hm-orgchart-resolved-table-cell-padding-y: var(--hm-orgchart-table-cell-padding-y, 6px);
+  --hm-orgchart-resolved-table-divider-color: var(--hm-orgchart-table-divider-color, var(--hm-orgchart-resolved-stroke-input-default));
+  --hm-orgchart-resolved-table-divider-width: var(--hm-orgchart-table-divider-width, var(--hm-orgchart-resolved-border-width));
+  --hm-orgchart-resolved-table-header-background: var(--hm-orgchart-table-header-background, #edf2f8);
+  --hm-orgchart-resolved-table-header-text: var(--hm-orgchart-table-header-text, #224387);
+  --hm-orgchart-resolved-table-header-font-size: var(--hm-orgchart-table-header-font-size, 12px);
+  --hm-orgchart-resolved-table-header-font-weight: var(--hm-orgchart-table-header-font-weight, var(--hm-orgchart-resolved-font-weight-bold));
+  --hm-orgchart-resolved-table-header-border-top: var(--hm-orgchart-table-header-border-top, var(--hm-orgchart-resolved-stroke-input-focus));
+  --hm-orgchart-resolved-table-header-border-bottom: var(--hm-orgchart-table-header-border-bottom, var(--hm-orgchart-resolved-stroke-input-default));
+  --hm-orgchart-resolved-table-row-hover-background: var(--hm-orgchart-table-row-hover-background, var(--hm-orgchart-resolved-bg-content));
+  --hm-orgchart-resolved-table-footer-background: var(--hm-orgchart-table-footer-background, var(--hm-orgchart-resolved-bg-subtle));
+  --hm-orgchart-resolved-table-footer-font-weight: var(--hm-orgchart-table-footer-font-weight, var(--hm-orgchart-resolved-font-weight-medium));
+  --hm-orgchart-resolved-table-caption-color: var(--hm-orgchart-table-caption-color, var(--hm-orgchart-resolved-fg-secondary));
+  --hm-orgchart-resolved-table-caption-font-size: var(--hm-orgchart-table-caption-font-size, 11px);
+  --hm-orgchart-resolved-table-caption-line-height: var(--hm-orgchart-table-caption-line-height, 16px);
+  --hm-orgchart-resolved-table-caption-gap: var(--hm-orgchart-table-caption-gap, 8px);
+}

packages/org-chart/src/styles/employee-card.css

@@ -0,0 +1,335 @@
+/* OrgChart content cards, not overrides of HM React components.
+   Colors, typography and geometry use standalone OrgChart variables.
+   Observed card geometry is a minimum; text may increase the card height. */
+.hm-orgchart-employee[data-card-kind] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: var(--hm-orgchart-resolved-card-width-employee);
+  min-width: var(--hm-orgchart-resolved-card-width-employee);
+  min-height: var(--hm-orgchart-resolved-card-height-employee);
+  margin: 0;
+  padding: 6px;
+  border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-current-border, var(--hm-orgchart-resolved-stroke-default));
+  border-radius: var(--hm-orgchart-resolved-radius-container);
+  background: var(--hm-orgchart-current-card-background, var(--hm-orgchart-resolved-bg-surface));
+  color: var(--hm-orgchart-current-card-color, var(--hm-orgchart-resolved-fg-primary));
+  font-family: var(--hm-orgchart-resolved-font-family);
+  text-align: left;
+}
+.hm-orgchart-employee[data-card-kind]::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  width: 42px;
+  height: 10px;
+  border-radius: 0 var(--hm-orgchart-resolved-radius-container) 0 100%;
+  background: var(--hm-orgchart-resolved-bg-content);
+  pointer-events: none;
+}
+.hm-orgchart-employee[data-card-kind="leader"],
+.hm-orgchart-employee[data-card-kind="topLeader"] {
+  width: var(--hm-orgchart-resolved-card-width-leader);
+  min-width: var(--hm-orgchart-resolved-card-width-leader);
+  min-height: var(--hm-orgchart-resolved-card-height-leader);
+  gap: 8px;
+  padding: 8px;
+  border-top: var(--hm-orgchart-resolved-border-top-width) solid var(--hm-orgchart-current-border, var(--hm-orgchart-resolved-action-primary));
+  background: var(--hm-orgchart-current-card-background, var(--hm-orgchart-resolved-bg-content));
+}
+.hm-orgchart-employee[data-card-kind="topLeader"] {
+  width: var(--hm-orgchart-resolved-card-width-top-leader);
+  min-width: var(--hm-orgchart-resolved-card-width-top-leader);
+  min-height: var(--hm-orgchart-resolved-card-height-top-leader);
+  border-color: var(--hm-orgchart-accent, var(--hm-orgchart-resolved-action-primary));
+  background: var(--hm-orgchart-current-card-background, var(--hm-orgchart-resolved-bg-surface));
+}
+.hm-orgchart-employee[data-card-kind] .hm-orgchart-avatar {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 0 0 28px;
+  width: 28px;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 3.5px;
+  background: var(--hm-orgchart-resolved-bg-subtle);
+  color: var(--hm-orgchart-resolved-fg-secondary);
+  font-size: 13px;
+  font-weight: var(--hm-orgchart-resolved-font-weight-medium);
+}
+.hm-orgchart-employee[data-card-kind="leader"] .hm-orgchart-avatar { flex-basis: 36px; width: 36px; height: 36px; }
+.hm-orgchart-employee[data-card-kind="topLeader"] .hm-orgchart-avatar { flex-basis: 40px; width: 40px; height: 40px; }
+.hm-orgchart-employee[data-card-kind] .hm-orgchart-avatar img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.hm-orgchart-employee[data-card-kind] .hm-orgchart-avatar img[data-photo-placeholder="true"] {
+  object-fit: contain;
+  background: #f1f5f8;
+}
+.hm-orgchart-employee[data-card-kind] .hm-orgchart-employee-details { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; }
+.hm-orgchart-employee[data-card-kind] .hm-orgchart-person-name {
+  display: block;
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: var(--hm-orgchart-resolved-font-weight-bold);
+  overflow-wrap: anywhere;
+  word-break: normal;
+}
+.hm-orgchart-employee[data-card-kind] .hm-orgchart-person-role {
+  display: block;
+  font-size: 10px;
+  line-height: 13px;
+  color: var(--hm-orgchart-resolved-fg-secondary);
+  overflow-wrap: anywhere;
+}
+.hm-orgchart-employee[data-card-kind][data-has-affiliation="true"] .hm-orgchart-person-role { padding-right: 18px; }
+.hm-orgchart-employee[data-card-kind] .hm-orgchart-person-attributes {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 4px;
+}
+.hm-orgchart-employee[data-card-kind] .hm-orgchart-job-title {
+  padding: 0 3px;
+  border-radius: var(--hm-orgchart-resolved-radius-control-md);
+  background: var(--hm-orgchart-resolved-accent);
+  color: var(--hm-orgchart-resolved-on-accent);
+  font-size: 10px;
+  line-height: 14px;
+  font-weight: var(--hm-orgchart-resolved-font-weight-medium);
+  overflow-wrap: anywhere;
+  max-width: 100%;
+}
+.hm-orgchart-employee[data-card-kind] .hm-orgchart-status-label {
+  font-size: 10px;
+  line-height: 14px;
+  color: var(--hm-orgchart-resolved-fg-secondary);
+  overflow-wrap: anywhere;
+}
+.hm-orgchart-employee[data-card-kind][data-work-status="dispatched"],
+.hm-orgchart-employee[data-card-kind][data-work-status="onLeave"] { border-style: dashed; }
+.hm-orgchart-employee[data-card-kind] .hm-orgchart-affiliation-mark {
+  position: absolute;
+  z-index: 1;
+  top: 4px;
+  right: 4px;
+  width: 16px;
+  min-height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--hm-orgchart-resolved-stroke-input-default);
+  border-radius: var(--hm-orgchart-resolved-radius-control-md);
+  background: var(--hm-orgchart-resolved-bg-content);
+  color: var(--hm-orgchart-resolved-fg-secondary);
+  font-size: 8px;
+  line-height: 12px;
+  overflow-wrap: anywhere;
+}
+.hm-orgchart-affiliation-mark img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: transparent;
+}
+/* Card image boxes are 1.5 times the P3.1 display: 14 -> 21px.
+   Keep the 1px transparent inset; summary logos stay unchanged. */
+.hm-orgchart-employee[data-card-kind] .hm-orgchart-affiliation-mark {
+  top: 0;
+  right: 0;
+  width: 23px;
+  height: 23px;
+  min-height: 23px;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 1px;
+}
+.hm-orgchart-employee[data-card-kind] .hm-orgchart-affiliation-mark img {
+  inset: 1px;
+  width: calc(100% - 2px);
+  height: calc(100% - 2px);
+}
+.hm-orgchart-affiliation-mark[data-logo-available="true"] .hm-orgchart-affiliation-fallback { visibility: hidden; }
+
+/* Approved SVG cards and compact read-only status cards share content layout.
+   Status cards retain their separate gray surface and do not receive an SVG. */
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) {
+  box-sizing: border-box;
+  width: 108px;
+  min-width: 108px;
+  height: 52px;
+  min-height: 52px;
+  padding: 4px;
+  gap: 4px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"],
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] {
+  width: 146px;
+  min-width: 146px;
+  height: 68px;
+  min-height: 68px;
+  padding: 6px;
+  gap: 6px;
+}
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] { height: 74px; min-height: 74px; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] { column-gap: 10px; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])::before { content: none; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-card-background {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none;
+}
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-avatar { flex-basis: 24px; width: 24px; height: 24px; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] .hm-orgchart-avatar { flex-basis: 32px; width: 32px; height: 32px; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] .hm-orgchart-avatar { flex-basis: 36px; width: 36px; height: 36px; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) {
+  --hm-orgchart-person-position-color: #797979;
+  --hm-orgchart-person-position-size: 15px;
+  --hm-orgchart-person-position-line-height: 18px;
+  --hm-orgchart-person-position-letter-spacing: -0.6px;
+  --hm-orgchart-person-name-size: 18px;
+  --hm-orgchart-person-name-line-height: 24px;
+  --hm-orgchart-person-name-letter-spacing: -0.8px;
+}
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"],
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] {
+  --hm-orgchart-person-position-size: 20px;
+  --hm-orgchart-person-position-line-height: 22px;
+  --hm-orgchart-person-position-letter-spacing: -0.8px;
+  --hm-orgchart-person-name-size: 24px;
+  --hm-orgchart-person-name-line-height: 30px;
+  --hm-orgchart-person-name-letter-spacing: -0.96px;
+}
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] {
+  --hm-orgchart-person-position-color: #224387;
+  --hm-orgchart-person-name-letter-spacing: -0.8px;
+}
+.hm-orgchart-employee[data-card-asset][data-card-asset-size="leader"] { --hm-orgchart-person-position-size: 18px; }
+/* Retain the status border while matching the approved small photo/text origins. */
+.hm-orgchart-employee[data-card-layout="compact"] { padding: 3px; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-text { display: flex; flex-direction: column; gap: 0; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-position-row { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-position-row .hm-orgchart-person-role { flex: 0 0 auto; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-position-row .hm-orgchart-job-title { flex: 0 0 auto; margin: 0; }
+/* The source's compact tag shares the position row. Align its lower edge with
+   that row so long raw tags clear the unchanged upper-right affiliation logo
+   within the approved 146px cards; row/name gap and typography stay intact. */
+.hm-orgchart-employee[data-workdesk-presentation="true"][data-card-asset="integrated-system"][data-card-asset-size="leader"] .hm-orgchart-position-row .hm-orgchart-job-title { align-self: flex-end; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-role,
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name { margin: 0; padding: 0; white-space: nowrap; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-has-affiliation="true"] .hm-orgchart-person-role { padding: 0; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-role {
+  color: var(--hm-orgchart-person-position-color);
+  font-size: var(--hm-orgchart-person-position-size);
+  font-weight: 400;
+  line-height: var(--hm-orgchart-person-position-line-height);
+  letter-spacing: var(--hm-orgchart-person-position-letter-spacing);
+}
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name {
+  color: #071D3A;
+  font-size: var(--hm-orgchart-person-name-size);
+  font-weight: 600;
+  line-height: var(--hm-orgchart-person-name-line-height);
+  letter-spacing: var(--hm-orgchart-person-name-letter-spacing);
+  overflow: hidden;
+  text-overflow: clip;
+}
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name[data-name-overflow="true"] { text-overflow: ellipsis; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-person-name { color: #323232; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name:focus-visible { outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus); outline-offset: 1px; }
+.hm-orgchart-employee[data-card-asset-size="employee"] .hm-orgchart-affiliation-mark { top: 2px; right: 1px; width: 20px; height: 20px; min-height: 20px; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-affiliation-fallback { font-size: 6px; white-space: nowrap; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-attributes { position: absolute; z-index: 1; left: 3px; bottom: 3px; width: 28px; justify-content: center; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] .hm-orgchart-person-attributes,
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] .hm-orgchart-person-attributes { left: 4px; width: 36px; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-job-title { max-width: 100%; padding: 0 2px; font-size: 8px; line-height: 12px; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] .hm-orgchart-job-title { font-size: 9px; font-weight: 700; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-job-title { font-size: 8.5px; font-weight: 600; }
+/* Workdesk source: index.css .rank-position/.role-rank and .bg-*.
+   Preserve the approved SVG geometry and position/name typography. The photo
+   slot uses the existing reserved width because the approved cards are smaller
+   than Workdesk's source cards; missing photos use the shared neutral icon. */
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]),
+.hm-orgchart-employee[data-workdesk-presentation="true"] {
+  --hm-orgchart-role-tag-color: #0e5492;
+  --hm-orgchart-role-tag-background: rgba(14, 84, 146, 0.08);
+  --hm-orgchart-role-tag-border: rgba(14, 84, 146, 0.2);
+}
+.hm-orgchart-employee[data-card-asset="business-planning"] {
+  --hm-orgchart-role-tag-color: #254e7e;
+  --hm-orgchart-role-tag-background: rgba(37, 78, 126, 0.1);
+  --hm-orgchart-role-tag-border: rgba(37, 78, 126, 0.26);
+}
+.hm-orgchart-employee[data-card-asset="talent-growth"] {
+  --hm-orgchart-role-tag-color: #0e67c8;
+  --hm-orgchart-role-tag-background: rgba(14, 103, 200, 0.1);
+  --hm-orgchart-role-tag-border: rgba(14, 103, 200, 0.26);
+}
+.hm-orgchart-employee[data-card-asset="integrated-system"] {
+  --hm-orgchart-role-tag-color: #6e47a0;
+  --hm-orgchart-role-tag-background: rgba(110, 71, 160, 0.1);
+  --hm-orgchart-role-tag-border: rgba(110, 71, 160, 0.26);
+}
+.hm-orgchart-employee[data-card-asset="design-planning"] {
+  --hm-orgchart-role-tag-color: #069a95;
+  --hm-orgchart-role-tag-background: rgba(6, 154, 149, 0.1);
+  --hm-orgchart-role-tag-border: rgba(6, 154, 149, 0.26);
+}
+.hm-orgchart-employee[data-card-asset="solution-sales"] {
+  --hm-orgchart-role-tag-color: #518b35;
+  --hm-orgchart-role-tag-background: rgba(81, 139, 53, 0.1);
+  --hm-orgchart-role-tag-border: rgba(81, 139, 53, 0.26);
+}
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-avatar,
+.hm-orgchart-employee[data-workdesk-presentation="true"] .hm-orgchart-avatar {
+  border-radius: 3.5px;
+  background: transparent;
+}
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-avatar { height: 44px; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] .hm-orgchart-avatar { height: 56px; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] .hm-orgchart-avatar { height: 62px; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-job-title,
+.hm-orgchart-employee[data-workdesk-presentation="true"] .hm-orgchart-job-title {
+  display: inline-flex;
+  align-items: center;
+  min-height: 13px;
+  padding: 0 3px;
+  border: 1px solid var(--hm-orgchart-role-tag-border);
+  border-radius: 4px;
+  background: var(--hm-orgchart-role-tag-background);
+  color: var(--hm-orgchart-role-tag-color);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0;
+}
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-job-title {
+  padding: 0 2px;
+  font-size: 8.5px;
+  font-weight: 600;
+}
+/* Status is retained for assistive reading; the specified two-line card
+   composition has no third status row. Supplementary status cards are intact. */
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-status-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.hm-orgchart-person-name-tooltip { position: fixed; z-index: 10; box-sizing: border-box; max-width: min(320px, calc(100vw - 16px)); padding: 6px 8px; border: 1px solid #224387; border-radius: 4px; background: #ffffff; color: #071D3A; font-family: var(--hm-orgchart-resolved-font-family); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; pointer-events: auto; }
+.hm-orgchart-person-name-tooltip[hidden] { display: none; }

packages/org-chart/src/styles/employee-info-dialog.css

@@ -0,0 +1,48 @@
+.hm-orgchart-organization-link {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  border-radius: inherit;
+}
+.hm-orgchart-organization-link:hover { text-decoration: underline; }
+.hm-orgchart-organization-link:focus-visible,
+.hm-orgchart-employee[role="button"]:focus-visible,
+.hm-orgchart-employee-dialog-close:focus-visible {
+  outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus);
+  outline-offset: 3px;
+}
+.hm-orgchart-employee[role="button"] { cursor: pointer; }
+.hm-orgchart-employee-dialog {
+  width: min(420px, calc(100vw - 32px));
+  max-width: calc(100vw - 32px);
+  max-height: calc(100dvh - 32px);
+  padding: var(--hm-orgchart-resolved-spacing-xxl);
+  border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-resolved-stroke-default);
+  border-radius: var(--hm-orgchart-resolved-radius-container);
+  background: var(--hm-orgchart-resolved-bg-surface);
+  color: var(--hm-orgchart-resolved-fg-primary);
+  font: inherit;
+  overflow: auto;
+}
+.hm-orgchart-employee-dialog::backdrop {
+  background: color-mix(in srgb, var(--hm-orgchart-resolved-fg-primary) 38%, transparent);
+}
+.hm-orgchart-employee-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: var(--hm-orgchart-resolved-spacing-lg); }
+.hm-orgchart-employee-dialog-header h2 { margin: 0; font-size: 18px; font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
+.hm-orgchart-employee-dialog-close {
+  padding: var(--hm-orgchart-resolved-spacing-xs) var(--hm-orgchart-resolved-spacing-sm);
+  border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-resolved-stroke-default);
+  border-radius: var(--hm-orgchart-resolved-radius-control-md);
+  background: var(--hm-orgchart-resolved-bg-content);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.hm-orgchart-employee-dialog-fields {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--hm-orgchart-resolved-spacing-md) var(--hm-orgchart-resolved-spacing-lg);
+  margin: var(--hm-orgchart-resolved-spacing-xl) 0 0;
+}
+.hm-orgchart-employee-dialog-fields dt { color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-employee-dialog-fields dd { margin: 0; overflow-wrap: anywhere; }

packages/org-chart/src/styles/org-chart-content.css

@@ -0,0 +1,147 @@
+/* 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-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-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-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-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; }
+.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[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; }

packages/org-chart/src/styles/org-chart-p3-summary.css

@@ -0,0 +1,119 @@
+/* P3 read-only summary presenters. Values are from Workdesk index.css:
+   headcount-panel / bold-text / sidebar- / #summary-table and the bottom
+   .section legend. These are standalone OrgChart content, not HM overrides. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-organization-totals {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  width: calc(var(--hm-orgchart-workdesk-summary-width) + 2px);
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  color: #18253a;
+  font-size: 14px;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-organization-totals-title {
+  width: 176px;
+  margin: 0;
+  padding: 4px 0;
+  border-radius: 7px 0 0 0;
+  background: linear-gradient(180deg, #004890, #00366f);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 15.2px;
+  text-align: center;
+}
+.hm-orgchart-workdesk-summary-frame {
+  width: 100%;
+  box-shadow: 0 6.5px 12.9px rgba(51, 73, 96, 0.11);
+  border: 0.8px solid #c4d3e2;
+  border-radius: 6.33px 0 6.33px 6.33px;
+  background: #fff;
+  overflow: hidden;
+}
+.hm-orgchart-workdesk-position-table {
+  width: var(--hm-orgchart-workdesk-summary-width);
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: 0;
+  color: #18253a;
+  font-size: 14px;
+  line-height: 1.15;
+  text-align: center;
+}
+/* Preserve the 330px fixture table while giving its complete organization
+   labels and three-character first position enough room at the source's 14px.
+   Remaining numeric columns share the available width without changing data. */
+.hm-orgchart-workdesk-label-column { width: 112px; }
+.hm-orgchart-workdesk-value-column { width: auto; }
+.hm-orgchart-workdesk-value-column:nth-child(2) { width: 46px; }
+.hm-orgchart-workdesk-position-table th,
+.hm-orgchart-workdesk-position-table td {
+  height: 19px;
+  padding: 0;
+  border-top: 0.5px solid #d7e1ea;
+  font-weight: 400;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow-wrap: normal;
+}
+.hm-orgchart-workdesk-position-table th:first-child { padding: 0 7px; }
+.hm-orgchart-workdesk-position-table :is(th, td) + :is(th, td) { border-left: 0.8px solid #d7e1ea; }
+.hm-orgchart-workdesk-position-table thead { color: #223149; }
+.hm-orgchart-workdesk-position-table thead th,
+.hm-orgchart-workdesk-position-table tfoot :is(th, td) { background: #f2f6fa; }
+.hm-orgchart-workdesk-position-table tfoot :is(th, td) { height: 20px; }
+.hm-orgchart-workdesk-count-cell { font-variant-numeric: tabular-nums; }
+
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 55.4px;
+  min-height: 55.4px;
+  padding: 0 19px;
+  border: 0;
+  border-radius: 10.7px;
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 5.4px 14.3px rgba(44, 68, 96, 0.08);
+  color: #1c2534;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-list {
+  flex-wrap: nowrap;
+  gap: 26.8px;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-item {
+  position: relative;
+  height: 42.9px;
+  min-height: 42.9px;
+  padding: 0;
+  gap: 4px;
+  font-size: 19.6px;
+  font-weight: 500;
+  line-height: 19.7px;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-item + .hm-orgchart-affiliation-bar-item { border: 0; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-item + .hm-orgchart-affiliation-bar-item::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -13.9px;
+  width: 0.9px;
+  height: 21.4px;
+  background: rgba(113, 142, 176, 0.48);
+  transform: translateY(-50%);
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-item dt { gap: 0.9px; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar .hm-orgchart-affiliation-mark {
+  width: 39.3px;
+  height: 39.3px;
+  flex-basis: 39.3px;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar .hm-orgchart-affiliation-mark img { object-fit: cover; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-total {
+  color: #071d3a;
+  font-weight: 700;
+}

packages/org-chart/src/styles/org-chart-readonly.css

@@ -0,0 +1,296 @@
+/* Read-only composition (displayMode: 'readOnly'): Workdesk-style view-only canvas.
+   Scoped to the composition attribute; interactive composition, standalone
+   components and the HM Theme are unaffected. Canvas geometry follows the
+   measured Workdesk layout (1920 × 914.5, axis X 935); spacing that differs
+   from Workdesk is a DESIGN_ADAPTATION to the confirmed card sizes. */
+.hm-orgchart-composition[data-display-mode="readOnly"] {
+  --hm-orgchart-group-title-font-size: 20px;
+  --hm-orgchart-group-title-font-weight: 700;
+  --hm-orgchart-group-title-line-height: 19.7px;
+  background: #F5F8FB;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage {
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  /* Heading | zero-width axis column at X 935 | side. */
+  grid-template-columns: 935px 0 minmax(0, 1fr);
+  grid-template-rows: auto auto 1fr auto;
+  grid-template-areas:
+    "heading axis side"
+    "tree tree tree"
+    "status status status"
+    "footer footer footer";
+  column-gap: 0;
+  width: max-content;
+  min-width: 1920px;
+  min-height: 914.5px;
+  padding: 12px 0;
+  background: #F5F8FB;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-heading { grid-area: heading; justify-self: start; align-self: start; max-width: calc(100% - 52px - 96px); margin: 0 0 0 52px; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-title { font-size: 32px; line-height: 40px; letter-spacing: -0.5px; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-date { margin: 4px 0 0; font-size: 14px; line-height: 20px; }
+
+/* Top leader and hub on the canvas axis, joined by one dashed line. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-axis {
+  grid-area: axis;
+  justify-self: center;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  width: max-content;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-axis::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  border-left: 1px dashed var(--hm-orgchart-resolved-stroke-default);
+  pointer-events: none;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-top-leaders { position: relative; z-index: 1; grid-column: auto; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-hub { grid-area: auto; margin: auto 0 18px; white-space: nowrap; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-hub::before { content: none; }
+
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-slot-side { grid-area: side; justify-self: end; align-self: start; margin-right: 20px; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-slot-belowTree { grid-area: status; align-self: end; margin: 12px 0 0 52px; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-slot-footer { grid-area: footer; margin: 8px 57px 0; }
+
+/* Hierarchy: no scroll frame; columns are positioned by measured header centers. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-main > .hm-orgchart-viewport { grid-area: tree; padding: 0; border: 0; border-radius: 0; overflow: visible; }
+/* Positioned columns are visually translated; keep their layout overhang out of the canvas width. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-viewport:has(> .hm-orgchart-forest[data-layout="workdesk"]) { contain: inline-size; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-forest[data-layout="workdesk"] { display: grid; position: relative; width: 100%; min-width: 0; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-forest[data-layout="workdesk"] > .hm-orgchart-tree {
+  grid-area: 1 / 1;
+  justify-self: start;
+  width: max-content;
+  margin-left: var(--hm-orgchart-column-center);
+  translate: -50% 0;
+}
+/* One hub branch bar from the first to the last column center. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-forest[data-layout="workdesk"]::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: var(--hm-orgchart-branch-start);
+  width: calc(var(--hm-orgchart-branch-end) - var(--hm-orgchart-branch-start));
+  border-top: 1px dashed var(--hm-orgchart-resolved-stroke-default);
+  pointer-events: none;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-forest[data-layout="workdesk"] > .hm-orgchart-tree::before { content: none; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart { min-width: 0; padding: 0; }
+
+/* Organization nodes: header + people only, no group card frame. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-depth] { width: max-content; min-width: 108px; margin: 0 8px 16px; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-header-role="organization"] {
+  --hm-orgchart-title-height: 36px;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-organization {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-organization-name { align-self: stretch; margin: 0; }
+/* Workdesk 1Depth typography; vertical padding must not enlarge the 36px header. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-header-role="organization"] .hm-orgchart-organization-name {
+  min-width: 146px;
+  height: 36px;
+  padding: 0 12px;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 36px;
+  white-space: nowrap;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-header-role="group"] {
+  --hm-orgchart-group-header-height: 30.4px;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-header-role="group"] .hm-orgchart-organization-name {
+  align-self: center;
+  width: 114px;
+  min-width: 114px;
+  min-height: 30.4px;
+  padding: 0;
+  background: var(--hm-orgchart-current-gradient);
+  border-radius: 7.1px;
+  box-shadow: 0 3.6px 8px rgba(45, 73, 104, 0.2);
+  font-size: var(--hm-orgchart-group-title-font-size);
+  font-weight: var(--hm-orgchart-group-title-font-weight);
+  line-height: var(--hm-orgchart-group-title-line-height);
+  letter-spacing: normal;
+  text-align: center;
+}
+/* Workdesk .hw/.hr labels share compact typography; .sw/.ux retain 20px/700. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-header-role="group"][data-organization-id^="business-planning-"] .hm-orgchart-organization-name,
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-header-role="group"][data-organization-id^="talent-growth-"] .hm-orgchart-organization-name { font-size: 18px; font-weight: 600; line-height: 16.9px; }
+/* Stacked cells: the vertical spine follows the 16px node gap. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth]) > .nodes > .hierarchy::before { top: -16px; height: 16px; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-leader { margin: 8px 0 0; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 8px; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees:empty { display: none; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee { margin-top: 0; }
+/* Final external gap: this must follow the generic employee margin reset.
+   Keeping semantic leader class preserves badges while SVG size uses ancestry. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee.hm-orgchart-leader { margin: 8px 0 0; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-header-role="group"] .hm-orgchart-employee.hm-orgchart-leader { margin-top: 8px; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node[data-header-role="group"] .hm-orgchart-employees:first-of-type { margin-top: 8px; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-employee-details { gap: 0; }
+
+/* Cells/teams of Div and Design: one horizontal row with the engine's sibling bar. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-children-layout="horizontal"]) > .nodes { flex-direction: row; align-items: flex-start; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-children-layout="horizontal"]) > .nodes > .hierarchy::before {
+  top: -9px; left: 0; width: 100%; height: auto; border-width: 2px 0 0 0;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-children-layout="horizontal"]) > .nodes > .hierarchy:first-child::before { left: calc(50% - 1px); width: calc(50% + 1px); }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-children-layout="horizontal"]) > .nodes > .hierarchy:last-child::before { left: 0; width: calc(50% + 1px); }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-children-layout="horizontal"]) > .nodes > .hierarchy:only-child::before { left: calc(50% - 1px); width: 2px; }
+
+/* Workdesk compact artwork. Preserve flow placement for unknown organizations;
+   the measured preset alone enables this original 1920×914.5 coordinate layer. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] { grid-template-rows: 224.2px auto 1fr auto; height: 914.5px; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-axis { width: 198px; height: 224.2px; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-top-leaders { position: absolute; top: 35.3px; z-index: 35; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-hub {
+  position: absolute;
+  top: 176px;
+  left: 50%;
+  translate: -50% 0;
+  z-index: 12;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  /* The fixed 198px axis is a center anchor, not a text-width constraint. */
+  max-width: none;
+  min-width: 198px;
+  height: 42px;
+  margin: 0;
+  padding: 9px 24px 9px 22px;
+  border-radius: 892.1px;
+  background: linear-gradient(-28.46deg, #809dd7, #45639f 79.33%);
+  gap: 8px;
+}
+.hm-orgchart-hub-icon { width: 20px; height: 20px; flex: 0 0 20px; stroke: #f8fcff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.38)); }
+.hm-orgchart-hub-label { position: relative; font-size: 21px; font-weight: 750; line-height: 24px; letter-spacing: normal; background: linear-gradient(180deg, #dbeeff, #f8fcff 15.38%, #fff 48.08%, #f4faff 79.33%, #dbeeff); background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)); }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-axis::before,
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-hub::after,
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-forest::before,
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-tree::after { content: none; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-viewport { position: relative; z-index: 7; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-heading,
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-footer { position: relative; z-index: 7; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-side { position: relative; z-index: 18; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-belowTree { position: relative; z-index: 32; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-belowTree { position: absolute; left: 32px; bottom: 70px; width: 240px; margin: 0; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-status-summary { gap: 12px; flex-wrap: nowrap; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-footer { position: absolute; left: 57px; right: 57px; bottom: 12px; margin: 0; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-person-role,
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-person-name,
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-job-title { white-space: nowrap; }
+/* Keep the logo above the unchanged position row. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-employee[data-card-asset-size="leader"] .hm-orgchart-affiliation-mark { top: 0; }
+.hm-orgchart-workdesk-overlay { position: absolute; inset: 0; width: 1920px; height: 914.5px; z-index: 4; pointer-events: none; }
+.hm-orgchart-workdesk-decoration { position: absolute; z-index: 0; pointer-events: none; user-select: none; object-fit: contain; }
+.hm-orgchart-workdesk-ring { top: 0; left: 50%; width: 1757px; height: 901px; translate: -50% 0; mix-blend-mode: multiply; }
+.hm-orgchart-workdesk-sky { inset: 0; width: 100%; height: 100%; object-position: top center; opacity: 0.1; }
+.hm-orgchart-workdesk-meeting { left: 68px; bottom: 32px; width: 557px; height: 344px; opacity: 0.8; mix-blend-mode: multiply; }
+.hm-orgchart-workdesk-grid { left: 62px; bottom: 18.9px; width: 1768px; height: 275px; }
+.hm-orgchart-workdesk-hub-frame { inset: 0; width: 100%; height: 100%; z-index: -1; object-position: top; }
+/* P3: artwork owns representative/hub/top-level routes. Hide every engine
+   hierarchy route in readOnly only, including upstream pseudo-element paths. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .hierarchy::before,
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .hierarchy::after,
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node::before,
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .node::after { content: none; display: none; }
+
+/* Organization totals (compact presenter of the shared Summary). */
+.hm-orgchart-organization-totals {
+  width: 332px;
+  overflow: hidden;
+  border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-resolved-table-divider-color);
+  border-radius: var(--hm-orgchart-resolved-radius-container);
+  background: var(--hm-orgchart-resolved-table-background);
+  color: var(--hm-orgchart-resolved-table-text);
+}
+.hm-orgchart-organization-totals-title {
+  margin: 0;
+  padding: 3px 8px;
+  background: var(--hm-orgchart-resolved-table-header-text);
+  color: var(--hm-orgchart-resolved-on-action-primary);
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: var(--hm-orgchart-resolved-font-weight-bold);
+  text-align: center;
+}
+.hm-orgchart-organization-totals-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
+.hm-orgchart-organization-total {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  padding: 3px 10px;
+  border-top: var(--hm-orgchart-resolved-table-divider-width) solid var(--hm-orgchart-resolved-table-divider-color);
+  font-size: var(--hm-orgchart-resolved-table-font-size);
+  line-height: var(--hm-orgchart-resolved-table-line-height);
+}
+.hm-orgchart-organization-total:nth-child(odd) { border-right: var(--hm-orgchart-resolved-table-divider-width) solid var(--hm-orgchart-resolved-table-divider-color); }
+.hm-orgchart-organization-total:nth-child(odd):last-child { grid-column: 1 / -1; border-right: 0; }
+.hm-orgchart-organization-total dt { min-width: 0; overflow-wrap: anywhere; }
+.hm-orgchart-organization-total dd { flex: 0 0 auto; margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--hm-orgchart-resolved-font-weight-medium); }
+.hm-orgchart-organization-total-sum { background: var(--hm-orgchart-resolved-table-footer-background); font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
+.hm-orgchart-organization-total-sum dd { font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
+
+/* Status groups: header pill + cards, no surrounding card. Title/card colors
+   come from the confirmed status styles in summary-sections.css. */
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-status-summary { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 48px; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-status-group { display: grid; justify-items: start; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-status-group > .hm-orgchart-summary-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 108px;
+  min-height: 24px;
+  margin: 0;
+  border-radius: var(--hm-orgchart-resolved-radius-container);
+  color: var(--hm-orgchart-resolved-on-action-primary);
+  font-size: var(--hm-orgchart-group-title-font-size);
+  font-weight: var(--hm-orgchart-group-title-font-weight);
+  line-height: var(--hm-orgchart-group-title-line-height);
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-status-employees { gap: 12px; margin: 0; }
+
+/* Affiliation bar: one untitled line of logo · name · count and the total. */
+.hm-orgchart-affiliation-bar {
+  padding: 8px 24px;
+  border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-resolved-stroke-input-default);
+  border-radius: var(--hm-orgchart-resolved-radius-container);
+  background: var(--hm-orgchart-resolved-bg-surface);
+}
+.hm-orgchart-affiliation-bar-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 4px; margin: 0; }
+.hm-orgchart-affiliation-bar-item { display: flex; align-items: center; gap: 6px; padding: 0 20px; font-size: 16px; line-height: 24px; white-space: nowrap; }
+.hm-orgchart-affiliation-bar-item + .hm-orgchart-affiliation-bar-item { border-left: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-resolved-stroke-default); }
+.hm-orgchart-affiliation-bar-item dt { display: flex; align-items: center; gap: 6px; }
+.hm-orgchart-affiliation-bar-item dd { margin: 0; font-variant-numeric: tabular-nums; }
+.hm-orgchart-affiliation-bar-total { font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
+.hm-orgchart-affiliation-bar .hm-orgchart-affiliation-mark {
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 24px;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 20px;
+  font-size: 9px;
+}

packages/org-chart/src/styles/org-chart.css

@@ -0,0 +1,55 @@
+@import './design-tokens.css';
+@import './employee-card.css';
+@import './summary-sections.css';
+@import './org-chart-content.css';
+@import './org-chart-readonly.css';
+@import './org-chart-p3-summary.css';
+@import './employee-info-dialog.css';
+/* Standalone defaults are scoped to the shell; only OrgChart public variables
+   inherit across the Shadow DOM boundary. No host HM Theme is required. */
+:host { display: block; min-width: 0; max-width: 100%; font: inherit; }
+.hm-orgchart-shell { position: relative; min-width: 0; color: var(--hm-orgchart-resolved-fg-primary); font-family: var(--hm-orgchart-resolved-font-family); font-size: var(--hm-orgchart-resolved-font-size-base); line-height: 1.5; }
+.hm-orgchart-shell *, .hm-orgchart-shell *::before, .hm-orgchart-shell *::after { box-sizing: border-box; }
+.hm-orgchart-state:empty { display: none; }
+.hm-orgchart-state, .hm-orgchart-issues { padding: 12px; background: var(--hm-orgchart-resolved-bg-content); border-radius: var(--hm-orgchart-resolved-radius-container); }
+.hm-orgchart-heading { margin-bottom: 16px; }
+.hm-orgchart-title { margin: 0; font-size: var(--hm-orgchart-resolved-font-size-title); line-height: 1.4; font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
+.hm-orgchart-description, .hm-orgchart-date { margin: 4px 0; color: var(--hm-orgchart-resolved-fg-secondary); overflow-wrap: anywhere; }
+.hm-orgchart-viewport { width: 100%; max-width: 100%; min-width: 0; overflow: auto; padding: 8px 0; border: 1px solid var(--hm-orgchart-resolved-stroke-default); border-radius: var(--hm-orgchart-resolved-radius-container); }
+.hm-orgchart-viewport:focus-visible, .hm-orgchart-toggle:focus-visible { outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus); outline-offset: 2px; }
+.hm-orgchart-forest { display: flex; width: max-content; min-width: 100%; }
+.hm-orgchart-tree { flex: 0 0 auto; }
+.hm-orgchart-engine.orgchart { min-width: 100%; background-image: none; user-select: text; padding: 20px 16px 0; }
+.hm-orgchart-engine.orgchart .node { width: 244px; margin-right: 8px; margin-left: 8px; padding: 0; border: 0; background: none; text-align: left; }
+.hm-orgchart-engine.orgchart .node:hover, .hm-orgchart-engine.orgchart .node.focused { background: none; }
+.hm-orgchart-engine.orgchart .node .edge { display: none; }
+.hm-orgchart-engine.orgchart .hierarchy { text-align: center; }
+.hm-orgchart-engine.orgchart .hierarchy::before { border-color: var(--hm-orgchart-resolved-stroke-default); }
+.hm-orgchart-engine.orgchart > ul > li > ul li > .node::before { background-color: var(--hm-orgchart-resolved-stroke-default); }
+.hm-orgchart-engine.orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after { background-color: var(--hm-orgchart-resolved-stroke-default); }
+.hm-orgchart-organization { width: 244px; padding: 12px; border: 1px solid var(--hm-orgchart-resolved-stroke-default); border-radius: var(--hm-orgchart-resolved-radius-container); background: var(--hm-orgchart-resolved-bg-surface); }
+.hm-orgchart-kind { display: block; font-size: 11px; color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-organization-name { margin: 2px 0 0; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
+.hm-orgchart-domain-id { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-node-count, .hm-orgchart-vacancy { margin: 8px 0; font-size: 11px; color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-employee { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
+.hm-orgchart-leader { padding: 8px; background: var(--hm-orgchart-resolved-bg-content); border-radius: var(--hm-orgchart-resolved-radius-container); }
+.hm-orgchart-avatar { position: relative; display: flex; flex: 0 0 32px; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: var(--hm-orgchart-resolved-bg-subtle); color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.hm-orgchart-employee-details { min-width: 0; }
+.hm-orgchart-person-name, .hm-orgchart-person-role, .hm-orgchart-status-label { display: block; overflow-wrap: anywhere; }
+.hm-orgchart-person-role, .hm-orgchart-status-label { font-size: 11px; color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-toggle { display: block; width: 100%; margin-top: 12px; padding: 6px 8px; border: 1px solid var(--hm-orgchart-resolved-stroke-default); border-radius: var(--hm-orgchart-resolved-radius-container); background: var(--hm-orgchart-resolved-bg-surface); color: var(--hm-orgchart-resolved-fg-primary); font: inherit; cursor: pointer; }
+.hm-orgchart-summary { margin-top: 16px; min-width: 0; }
+.hm-orgchart-summary-title { margin: 0 0 8px; font-size: 15px; }
+.hm-orgchart-raw-total, .hm-orgchart-policy { margin: 4px 0; }
+.hm-orgchart-policy { color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-summary table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 12px; }
+.hm-orgchart-summary caption { padding-bottom: 8px; text-align: left; color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-summary th, .hm-orgchart-summary td { padding: 8px; border-bottom: 1px solid var(--hm-orgchart-resolved-stroke-default); text-align: left; overflow-wrap: anywhere; }
+.hm-orgchart-summary th { font-weight: 500; }
+.hm-orgchart-group-title { margin: 12px 0 4px; font-size: 13px; }
+.hm-orgchart-summary-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; margin: 0; }
+.hm-orgchart-summary-group dt { overflow-wrap: anywhere; }
+.hm-orgchart-summary-group dd { margin: 0; }
+@media (prefers-reduced-motion: reduce) { .hm-orgchart-engine.orgchart .node { transition-duration: 0.01ms; } }

packages/org-chart/src/styles/summary-sections.css

@@ -0,0 +1,141 @@
+/* Independent content summaries inside Core's Shadow DOM. Colors and radii use
+   the standalone OrgChart defaults in design-tokens.css.
+   Content gaps/dimensions are local geometry, not overrides of HM components. */
+.hm-orgchart-position-summary,
+.hm-orgchart-affiliation-summary,
+.hm-orgchart-status-group {
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid var(--hm-orgchart-resolved-stroke-default);
+  border-radius: var(--hm-orgchart-resolved-radius-container);
+  background: var(--hm-orgchart-resolved-bg-surface);
+}
+.hm-orgchart-position-summary { margin-top: 0; }
+.hm-orgchart-position-summary .hm-orgchart-summary-title,
+.hm-orgchart-affiliation-summary .hm-orgchart-summary-title,
+.hm-orgchart-status-summary .hm-orgchart-summary-title {
+  margin: 0 0 8px;
+  font-size: 15px;
+  font-weight: var(--hm-orgchart-resolved-font-weight-bold);
+  line-height: 1.5;
+}
+.hm-orgchart-position-summary .hm-orgchart-raw-total,
+.hm-orgchart-affiliation-summary .hm-orgchart-raw-total {
+  margin: 0 0 8px;
+  font-weight: var(--hm-orgchart-resolved-font-weight-medium);
+}
+.hm-orgchart-position-summary .hm-orgchart-policy,
+.hm-orgchart-status-summary .hm-orgchart-policy {
+  margin: 4px 0;
+  color: var(--hm-orgchart-resolved-fg-secondary);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+.hm-orgchart-summary-scroll { max-width: 100%; overflow: auto; margin-top: 12px; }
+.hm-orgchart-summary-scroll:focus-visible {
+  outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus);
+  outline-offset: 2px;
+}
+.hm-orgchart-summary .hm-orgchart-position-table {
+  width: max-content;
+  min-width: 100%;
+  margin-top: 0;
+  table-layout: auto;
+  border-collapse: collapse;
+  color: var(--hm-orgchart-resolved-table-text);
+  background: var(--hm-orgchart-resolved-table-background);
+  font-size: var(--hm-orgchart-resolved-table-font-size);
+  line-height: var(--hm-orgchart-resolved-table-line-height);
+}
+.hm-orgchart-summary .hm-orgchart-position-table caption {
+  max-width: 480px;
+  padding: 0 0 var(--hm-orgchart-resolved-table-caption-gap);
+  text-align: left;
+  color: var(--hm-orgchart-resolved-table-caption-color);
+  font-size: var(--hm-orgchart-resolved-table-caption-font-size);
+  line-height: var(--hm-orgchart-resolved-table-caption-line-height);
+}
+.hm-orgchart-summary .hm-orgchart-position-table th,
+.hm-orgchart-summary .hm-orgchart-position-table td {
+  min-width: 64px;
+  max-width: 160px;
+  padding: var(--hm-orgchart-resolved-table-cell-padding-y) var(--hm-orgchart-resolved-table-cell-padding-x);
+  border-bottom: var(--hm-orgchart-resolved-table-divider-width) solid var(--hm-orgchart-resolved-table-divider-color);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+  vertical-align: middle;
+}
+.hm-orgchart-summary .hm-orgchart-position-table th:first-child { min-width: 100px; }
+.hm-orgchart-summary .hm-orgchart-position-table thead th {
+  background: var(--hm-orgchart-resolved-table-header-background);
+  color: var(--hm-orgchart-resolved-table-header-text);
+  border-top: var(--hm-orgchart-resolved-table-divider-width) solid var(--hm-orgchart-resolved-table-header-border-top);
+  border-bottom-color: var(--hm-orgchart-resolved-table-header-border-bottom);
+  font-size: var(--hm-orgchart-resolved-table-header-font-size);
+  font-weight: var(--hm-orgchart-resolved-table-header-font-weight);
+}
+.hm-orgchart-summary .hm-orgchart-position-table tbody th { font-weight: var(--hm-orgchart-resolved-font-weight-medium); }
+.hm-orgchart-summary .hm-orgchart-position-table .hm-orgchart-count-cell { text-align: right; }
+.hm-orgchart-summary .hm-orgchart-position-table .hm-orgchart-subtotal { font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
+.hm-orgchart-summary .hm-orgchart-position-table .hm-orgchart-inclusive { color: var(--hm-orgchart-resolved-fg-secondary); text-align: right; }
+.hm-orgchart-summary .hm-orgchart-position-table tfoot {
+  background: var(--hm-orgchart-resolved-table-footer-background);
+  font-weight: var(--hm-orgchart-resolved-table-footer-font-weight);
+}
+.hm-orgchart-summary .hm-orgchart-position-table tbody tr:hover { background: var(--hm-orgchart-resolved-table-row-hover-background); }
+.hm-orgchart-status-totals { font-size: 12px; }
+.hm-orgchart-affiliation-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
+  gap: 8px;
+  margin: 12px 0 0;
+}
+.hm-orgchart-affiliation-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid var(--hm-orgchart-resolved-stroke-input-default);
+  border-radius: var(--hm-orgchart-resolved-radius-container);
+  background: var(--hm-orgchart-resolved-bg-content);
+}
+.hm-orgchart-affiliation-name { min-width: 0; overflow-wrap: anywhere; font-weight: var(--hm-orgchart-resolved-font-weight-medium); }
+.hm-orgchart-affiliation-name { display: flex; align-items: center; gap: 8px; }
+.hm-orgchart-affiliation-name .hm-orgchart-affiliation-mark {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 28px;
+  font-size: 10px;
+}
+.hm-orgchart-affiliation-count { flex: 0 0 auto; margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
+.hm-orgchart-status-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+  gap: 16px;
+  min-width: 0;
+}
+.hm-orgchart-status-summary:empty { display: none; }
+.hm-orgchart-status-employees { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
+.hm-orgchart-status-employees .hm-orgchart-employee { margin-top: 0; }
+.hm-orgchart-status-group > .hm-orgchart-summary-title {
+  background: linear-gradient(180deg, #87909c 0%, #68727e 100%);
+  border: 1px solid rgba(92, 101, 112, 0.52);
+  box-shadow: 0 7px 16px rgba(75, 84, 96, 0.18);
+}
+.hm-orgchart-status-group .hm-orgchart-employee[data-card-kind] {
+  margin: 0;
+  background-image: linear-gradient(180deg, #f4f5f6 0%, #dfe3e7 100%) !important;
+  border: 1px solid rgba(120, 130, 142, 0.35);
+  border-radius: var(--br-3_5, var(--hm-orgchart-resolved-radius-container));
+  cursor: pointer;
+}
+.hm-orgchart-status-group .hm-orgchart-employee[data-card-kind] .hm-orgchart-person-role { color: #555f6a; }
+.hm-orgchart-status-group .hm-orgchart-employee[data-card-kind] .hm-orgchart-person-name { color: #3e4650; }
+.hm-orgchart-status-group .hm-orgchart-affiliation-mark img { filter: grayscale(1); opacity: 0.72; }
+.hm-orgchart-content-empty { margin: 8px 0; color: var(--hm-orgchart-resolved-fg-secondary); font-size: 12px; }