.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 {
  outline: 2px solid var(--hm-orgchart-card-focus-color, 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-dialog-border, var(--hm-orgchart-resolved-stroke-default));
  border-radius: var(--hm-orgchart-resolved-radius-container);
  background: var(--hm-orgchart-dialog-background, var(--hm-orgchart-resolved-bg-surface));
  color: var(--hm-orgchart-dialog-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);
  /* Reserve the former text button's height so the title, body and dialog size stay put. */
  min-height: calc(1lh + 2 * var(--hm-orgchart-resolved-spacing-xs) + 2 * var(--hm-orgchart-resolved-border-width));
}
.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 {
  /* Match HM Dialog's ghost / icon-sm Button without a React or theme dependency.
     Fallbacks are the declared HM defaults (theme/default.css and primitives.css). */
  --hm-orgchart-dialog-close-ink: var(--hm-orgchart-dialog-close-color, var(--foreground, var(--hm-sem-fg-primary, #0a221d)));
  --hm-orgchart-dialog-close-hover: var(--hm-orgchart-dialog-close-hover-background, var(--muted, var(--hm-sem-bg-subtle, #f4f1ea)));
  --hm-orgchart-dialog-close-ring: var(--hm-orgchart-dialog-focus-color, var(--ring, var(--hm-sem-stroke-input-focus, #266651)));
  position: absolute;
  top: calc(var(--spacing, .25rem) * 2);
  right: calc(var(--spacing, .25rem) * 2);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-sizing: border-box;
  width: calc(var(--spacing, .25rem) * 7);
  height: calc(var(--spacing, .25rem) * 7);
  padding: 0;
  border: 1px solid transparent;
  border-radius: min(var(--radius-md, calc(var(--radius, var(--hm-radius-container, 4px)) * .8)), 12px);
  background: transparent;
  background-clip: padding-box;
  color: var(--hm-orgchart-dialog-close-ink);
  font: inherit; font-size: .875rem; line-height: calc(var(--spacing, .25rem) * 5); font-weight: 500;
  outline: none; outline-offset: 0; box-shadow: none;
  cursor: default; user-select: none; white-space: nowrap;
  transition: all 150ms cubic-bezier(.4, 0, .2, 1);
}
.hm-orgchart-employee-dialog-close svg {
  width: calc(var(--spacing, .25rem) * 4);
  height: calc(var(--spacing, .25rem) * 4);
  pointer-events: none; flex-shrink: 0;
}
.hm-orgchart-employee-dialog-close:hover {
  background-color: var(--hm-orgchart-dialog-close-hover);
}
:host-context(.dark) .hm-orgchart-employee-dialog-close:hover,
.dark .hm-orgchart-employee-dialog-close:hover {
  background-color: color-mix(in oklab, var(--hm-orgchart-dialog-close-hover) 50%, transparent);
}
.hm-orgchart-employee-dialog-close:focus-visible {
  border-color: var(--hm-orgchart-dialog-close-ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hm-orgchart-dialog-close-ring) 50%, transparent);
}
.hm-orgchart-employee-dialog-close:active {
  transform: translateY(1px);
}
.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; }