/* Auto-only layout. P5-4 retains the current card geometry by user decision; no external SVG reconstruction is required for this presentation. */ .hm-orgchart-expanded { --hm-orgchart-expanded-sibling-gap: var(--hm-orgchart-resolved-spacing-xxl); --hm-orgchart-expanded-level-gap: calc(2 * var(--hm-orgchart-resolved-spacing-xxl)); --hm-orgchart-expanded-title-gap: var(--hm-orgchart-resolved-spacing-md); --hm-orgchart-expanded-employee-gap: var(--hm-orgchart-resolved-spacing-md); --hm-orgchart-expanded-line-width: var(--hm-orgchart-resolved-border-width); /* Meaningful Auto relationships: separate from neutral card/Fixed borders. */ --hm-orgchart-resolved-expanded-line-color: var(--hm-orgchart-expanded-line-color, #738399); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hm-orgchart-resolved-spacing-lg); width: 100%; min-width: 0; padding: var(--hm-orgchart-resolved-spacing-lg); /* Optional host review frame inputs affect only this outer Auto container. */ background: var(--hm-orgchart-expanded-preview-background, var(--hm-orgchart-resolved-bg-content)); border: var(--hm-orgchart-expanded-preview-border, 0); border-radius: var(--hm-orgchart-expanded-preview-radius, 0); } .hm-orgchart-expanded .hm-orgchart-heading { margin: 0; } .hm-orgchart-expanded .hm-orgchart-viewport { position: relative; height: clamp(320px, 65vh, 800px); padding: 0; overflow: hidden; touch-action: none; cursor: grab; /* Canvas input is independent of cards and the outer preview frame. Keep existing bg-surface themes as the fallback (standalone: #ffffff). */ background: var(--hm-orgchart-expanded-canvas-background, var(--hm-orgchart-resolved-bg-surface)); } .hm-orgchart-expanded .hm-orgchart-forest { position: absolute; top: 0; left: 0; width: max-content; min-width: 0; transform-origin: 0 0; justify-content: flex-start; align-items: flex-start; gap: var(--hm-orgchart-expanded-sibling-gap); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart { min-width: 0; padding: 0; } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth]) > .nodes { flex-direction: row; align-items: flex-start; } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] { vertical-align: top; width: max-content; min-width: var(--hm-orgchart-resolved-card-width-leader); margin: 0 calc(var(--hm-orgchart-expanded-sibling-gap) / 2) var(--hm-orgchart-expanded-level-gap); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] > .hm-orgchart-organization { display: flex; flex-direction: column; align-items: center; gap: var(--hm-orgchart-expanded-title-gap); width: max-content; min-width: var(--hm-orgchart-resolved-card-width-leader); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; position: relative; } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-organization-name { align-self: stretch; margin: 0; height: auto; min-height: 0; padding: 0; background: var(--hm-orgchart-group-title-background, var(--hm-orgchart-expanded-primary)); color: var(--hm-orgchart-group-title-color, #ffffff); font-size: var(--hm-orgchart-resolved-font-size-base); font-weight: var(--hm-orgchart-resolved-font-weight-bold); line-height: 1.5; white-space: nowrap; } .hm-orgchart-expanded .hm-orgchart-organization-link { color: inherit; } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees { display: flex; flex-direction: column; align-items: center; gap: var(--hm-orgchart-expanded-employee-gap); margin: 0; } /* Shared neutral cards, isolated from Fixed asset backgrounds and geometry. */ .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-presentation="expanded"] { margin: 0; box-sizing: border-box; border: var(--hm-orgchart-expanded-card-border-width, var(--hm-orgchart-resolved-border-width)) solid var(--hm-orgchart-card-border, var(--hm-orgchart-resolved-stroke-default)); background: var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface)); color: var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary)); } .hm-orgchart-expanded .hm-orgchart-employee[data-card-presentation="expanded"]::before { content: none; } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-kind="leader"] { background: var(--hm-orgchart-leader-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface))); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-kind="topLeader"] { background: var(--hm-orgchart-top-leader-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface))); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-work-status="dispatched"] { --hm-orgchart-resolved-status-card-background: var(--hm-orgchart-dispatched-card-gradient, var(--hm-orgchart-resolved-role-card-background)); background: var(--hm-orgchart-resolved-status-card-background); border-color: var(--hm-orgchart-dispatched-card-border, var(--hm-orgchart-card-border, var(--hm-orgchart-resolved-stroke-default))); color: var(--hm-orgchart-dispatched-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary))); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-work-status="onLeave"] { --hm-orgchart-resolved-status-card-background: var(--hm-orgchart-on-leave-card-gradient, var(--hm-orgchart-resolved-role-card-background)); background: var(--hm-orgchart-resolved-status-card-background); border-color: var(--hm-orgchart-on-leave-card-border, var(--hm-orgchart-card-border, var(--hm-orgchart-resolved-stroke-default))); color: var(--hm-orgchart-on-leave-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary))); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-presentation="expanded"]:hover { background: var(--hm-orgchart-card-hover-background, var(--hm-orgchart-resolved-status-card-background, var(--hm-orgchart-resolved-role-card-background))); } .hm-orgchart-expanded .hm-orgchart-employee[data-card-kind="employee"] { --hm-orgchart-resolved-role-card-background: var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface)); } .hm-orgchart-expanded .hm-orgchart-employee[data-card-kind="leader"] { --hm-orgchart-resolved-role-card-background: var(--hm-orgchart-leader-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface))); } .hm-orgchart-expanded .hm-orgchart-employee[data-card-kind="topLeader"] { --hm-orgchart-resolved-role-card-background: var(--hm-orgchart-top-leader-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface))); } .hm-orgchart-expanded .hm-orgchart-employee[data-card-presentation="expanded"] .hm-orgchart-avatar { border-radius: 0; } .hm-orgchart-expanded .hm-orgchart-person-text { display: flex; flex-direction: column; gap: 0; } .hm-orgchart-expanded .hm-orgchart-employee::after { content: none; } /* Keep dabeng's first/last/only-child horizontal branch geometry. Only change connector length and offsets to agree with the Auto vertical gap. */ .hm-orgchart-expanded .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth]) > .nodes > .hierarchy::before { top: calc(-1 * var(--hm-orgchart-expanded-level-gap) / 2); left: 0; width: 100%; height: 0; border-width: var(--hm-orgchart-expanded-line-width) 0 0; border-color: var(--hm-orgchart-resolved-expanded-line-color); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth]) > .nodes > .hierarchy:first-child::before { left: calc(50% - 1px); width: calc(50% + 1px); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth]) > .nodes > .hierarchy:last-child::before { width: calc(50% + 1px); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth]) > .nodes > .hierarchy:only-child::before { left: calc(50% - 1px); width: var(--hm-orgchart-expanded-line-width); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart > ul > li > ul li > .node::before { top: calc(-1 * var(--hm-orgchart-expanded-level-gap) / 2); height: calc(var(--hm-orgchart-expanded-level-gap) / 2); width: var(--hm-orgchart-expanded-line-width); background-color: var(--hm-orgchart-resolved-expanded-line-color); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after { bottom: calc(-1 * var(--hm-orgchart-expanded-level-gap) / 2); height: calc(100% - var(--hm-orgchart-expanded-content-height) + var(--hm-orgchart-expanded-level-gap) / 2); width: var(--hm-orgchart-expanded-line-width); background-color: var(--hm-orgchart-resolved-expanded-line-color); } /* Standalone content variables, independent of Fixed and HM React controls. */ .hm-orgchart-expanded { --hm-orgchart-expanded-card-border-width: 1px; --hm-orgchart-expanded-card-accent-width: 3px; --hm-orgchart-expanded-card-padding: 8px; --hm-orgchart-expanded-card-radius: var(--hm-orgchart-resolved-radius-container); --hm-orgchart-expanded-photo-size: 36px; --hm-orgchart-expanded-name-size: 13px; --hm-orgchart-expanded-position-size: 10px; --hm-orgchart-expanded-name-weight: var(--hm-orgchart-resolved-font-weight-bold); --hm-orgchart-expanded-person-gap: 0px; --hm-orgchart-expanded-title-padding: var(--hm-orgchart-resolved-spacing-sm) var(--hm-orgchart-resolved-spacing-md); --hm-orgchart-expanded-title-radius: var(--hm-orgchart-resolved-radius-control-md); } .hm-orgchart-expanded .hm-orgchart-organization-name { display: flex; border-radius: var(--hm-orgchart-expanded-title-radius); } .hm-orgchart-expanded-toggle { flex: 1; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: var(--hm-orgchart-expanded-title-padding); white-space: nowrap; border-radius: inherit; } .hm-orgchart-expanded-toggle:not(:disabled):hover, .hm-orgchart-expanded-link:hover { background: color-mix(in srgb, currentColor 12%, transparent); } .hm-orgchart-expanded-toggle:is(:disabled, [aria-disabled="true"]) { cursor: default; opacity: 0.75; } .hm-orgchart-expanded-link { display: inline-flex; align-items: center; padding-inline: var(--hm-orgchart-resolved-spacing-sm); color: inherit; } .hm-orgchart-expanded-toggle:focus-visible, .hm-orgchart-expanded-link:focus-visible, .hm-orgchart-expanded-toolbar button:focus-visible { outline: 3px solid var(--hm-orgchart-resolved-action-primary); outline-offset: 3px; } .hm-orgchart-expanded-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hm-orgchart-resolved-spacing-sm); } .hm-orgchart-expanded-toolbar button { font: inherit; padding: var(--hm-orgchart-resolved-spacing-sm) var(--hm-orgchart-resolved-spacing-md); 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-surface); color: var(--hm-orgchart-resolved-fg-primary); cursor: pointer; } .hm-orgchart-expanded-toolbar button:disabled { opacity: 0.5; cursor: default; } .hm-orgchart-expanded-toolbar span { color: var(--hm-orgchart-resolved-fg-secondary); font-size: var(--hm-orgchart-resolved-font-size-meta); } .hm-orgchart-expanded-selection, .hm-orgchart-top-node-title { margin: 0; } .hm-orgchart-expanded-empty { padding: var(--hm-orgchart-resolved-spacing-lg); } .hm-orgchart-expanded .hm-orgchart-viewport[data-dragging] { cursor: grabbing; user-select: none; } .hm-orgchart-expanded .hm-orgchart-viewport[data-pan-enabled="false"] { cursor: default; } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] { cursor: default; } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees[data-connection-direction="left"], .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees[data-connection-direction="right"] { padding-inline: var(--hm-orgchart-resolved-spacing-xxl); } .hm-orgchart-expanded .hm-orgchart-employee-connectors { position: absolute; inset: 0; overflow: visible; pointer-events: none; } .hm-orgchart-expanded .hm-orgchart-employee-connectors path { fill: none; stroke: var(--hm-orgchart-resolved-expanded-line-color); stroke-width: var(--hm-orgchart-expanded-line-width); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-presentation="expanded"] { padding: var(--hm-orgchart-expanded-card-padding); border-radius: var(--hm-orgchart-expanded-card-radius); width: var(--hm-orgchart-expanded-card-width, var(--hm-orgchart-resolved-card-width-employee)); min-width: 0; min-height: var(--hm-orgchart-expanded-card-height, var(--hm-orgchart-resolved-card-height-employee)); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-leader[data-card-presentation="expanded"] { width: var(--hm-orgchart-expanded-leader-width, var(--hm-orgchart-resolved-card-width-leader)); min-height: var(--hm-orgchart-expanded-leader-height, var(--hm-orgchart-resolved-card-height-leader)); } /* Inset accents preserve all outer dimensions even when accent width changes. */ .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-presentation="expanded"][data-connection-direction="top"] { box-shadow: inset 0 var(--hm-orgchart-expanded-card-accent-width) 0 var(--hm-orgchart-card-accent, var(--hm-orgchart-expanded-card-primary)); border-top-color: var(--hm-orgchart-card-accent, var(--hm-orgchart-expanded-card-primary)); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-presentation="expanded"][data-connection-direction="left"] { box-shadow: inset var(--hm-orgchart-expanded-card-accent-width) 0 0 var(--hm-orgchart-card-accent, var(--hm-orgchart-expanded-card-primary)); border-left-color: var(--hm-orgchart-card-accent, var(--hm-orgchart-expanded-card-primary)); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-presentation="expanded"][data-connection-direction="right"] { box-shadow: inset calc(-1 * var(--hm-orgchart-expanded-card-accent-width)) 0 0 var(--hm-orgchart-card-accent, var(--hm-orgchart-expanded-card-primary)); border-right-color: var(--hm-orgchart-card-accent, var(--hm-orgchart-expanded-card-primary)); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee .hm-orgchart-avatar { width: var(--hm-orgchart-expanded-photo-size); height: var(--hm-orgchart-expanded-photo-size); flex-basis: var(--hm-orgchart-expanded-photo-size); } .hm-orgchart-expanded .hm-orgchart-person-text { gap: var(--hm-orgchart-expanded-person-gap); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-person-name { font-size: var(--hm-orgchart-expanded-name-size); font-weight: var(--hm-orgchart-expanded-name-weight); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-person-role { font-size: var(--hm-orgchart-expanded-position-size); } /* P7: direction/vertical adapters keep dabeng's recursive hierarchy and the existing HM card geometry. Plain TB continues to use its original rules. */ .hm-orgchart-expanded .hm-orgchart-tree { position: relative; flex: none; } .hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-forest { flex-direction: column; } .hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart.l2r { position: relative; transform: none; transform-origin: 0 0; } .hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart .hierarchy { display: flex; flex-direction: row; align-items: center; } .hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth]) > .nodes { flex-direction: column; align-items: flex-start; } .hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart .node[data-depth] { flex: none; height: auto; min-height: 0; margin: calc(var(--hm-orgchart-expanded-sibling-gap) / 2) var(--hm-orgchart-expanded-level-gap) calc(var(--hm-orgchart-expanded-sibling-gap) / 2) 0; } .hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart .node[data-depth] > .hm-orgchart-organization { margin-inline: auto; padding-inline: var(--hm-orgchart-resolved-spacing-xxl); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical, .hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .nodes, .hm-orgchart-expanded .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth]) > .nodes.vertical { display: flex; flex-direction: column; align-items: flex-start; width: max-content; padding-left: var(--hm-orgchart-resolved-spacing-xxl); gap: calc(var(--hm-orgchart-expanded-level-gap) / 2); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical { margin-inline: auto; } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .nodes { padding-top: calc(var(--hm-orgchart-expanded-level-gap) / 2); } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .hierarchy:has(> .node[data-depth]) > .nodes { flex-direction: column; align-items: flex-start; } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .node[data-depth] { margin: 0; min-height: 0; } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .node[data-depth] > .hm-orgchart-organization { padding-inline: var(--hm-orgchart-resolved-spacing-xxl); } /* Measured Auto connector routes replace upstream fixed-card pseudo geometry in LR/global Hybrid/TB per-group Hybrid only. */ .hm-orgchart-expanded:is([data-auto-layout="lr"], [data-auto-layout="hybrid"], [data-group-hybrid="true"]) .hm-orgchart-engine.orgchart .hierarchy::before, .hm-orgchart-expanded:is([data-auto-layout="lr"], [data-auto-layout="hybrid"], [data-group-hybrid="true"]) .hm-orgchart-engine.orgchart .hierarchy::after, .hm-orgchart-expanded:is([data-auto-layout="lr"], [data-auto-layout="hybrid"], [data-group-hybrid="true"]) .hm-orgchart-engine.orgchart .node[data-depth]::before, .hm-orgchart-expanded:is([data-auto-layout="lr"], [data-auto-layout="hybrid"], [data-group-hybrid="true"]) .hm-orgchart-engine.orgchart .node[data-depth]::after { content: none; } .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node > .toggleBtn { display: none; } .hm-orgchart-expanded .hm-orgchart-organization-connectors { position: absolute; inset: 0; overflow: visible; pointer-events: none; } .hm-orgchart-expanded .hm-orgchart-organization-connectors path { fill: none; stroke: var(--hm-orgchart-resolved-expanded-line-color); stroke-width: var(--hm-orgchart-expanded-line-width); } /* P9.3: outlines do not resize cards or replace company accents/connectors. */ .hm-orgchart-expanded .hm-orgchart-viewport[data-drag-drop-enabled="true"] :is(.hm-orgchart-employee, .hm-orgchart-expanded-toggle) { cursor: grab; } .hm-orgchart-expanded .hm-orgchart-viewport[data-drag-drop-enabled="false"] :is(.hm-orgchart-employee, .hm-orgchart-expanded-toggle) { cursor: pointer; } .hm-orgchart-expanded .hm-orgchart-move-feedback { margin: 0; overflow-wrap: anywhere; color: var(--hm-orgchart-resolved-fg-secondary); } .hm-orgchart-expanded .hm-orgchart-move-feedback[data-move-status="success"] { color: var(--hm-orgchart-resolved-action-primary); font-weight: var(--hm-orgchart-resolved-font-weight-bold); } .hm-orgchart-expanded .hm-orgchart-move-feedback[data-move-status="failure"] { color: var(--hm-orgchart-resolved-fg-primary); text-decoration: underline; } .hm-orgchart-expanded .hm-orgchart-viewport[data-edit-dragging] { cursor: grabbing; user-select: none; } .hm-orgchart-expanded [data-edit-source="true"] { opacity: 0.55; } .hm-orgchart-expanded .node[data-drop-state="allowed"] > .hm-orgchart-organization { outline: 2px dashed var(--hm-orgchart-resolved-stroke-input-focus); outline-offset: 2px; } .hm-orgchart-expanded .node[data-drop-state="blocked"] > .hm-orgchart-organization { outline: 1px dotted var(--hm-orgchart-resolved-stroke-default); outline-offset: 2px; } .hm-orgchart-expanded .node[data-drop-hover="allowed"] > .hm-orgchart-organization { outline: 3px solid var(--hm-orgchart-resolved-action-primary); } .hm-orgchart-expanded .node[data-drop-hover="blocked"] > .hm-orgchart-organization { outline: 3px double var(--hm-orgchart-resolved-fg-secondary); } /* Chart Only (presentationMode="chart-only"): one white canvas that fills the host container. Default Expanded rules above are unchanged. The host sets the canvas size; without a definite height the 320px minimum applies. */ :host([data-presentation-mode="chart-only"]) { height: 100%; } .hm-orgchart-shell[data-presentation-mode="chart-only"] { height: 100%; background: var(--hm-orgchart-resolved-bg-surface); } .hm-orgchart-shell[data-presentation-mode="chart-only"] > .hm-orgchart-content { height: 100%; } /* Loading/error status overlays the canvas instead of shifting it. */ .hm-orgchart-shell[data-presentation-mode="chart-only"] > .hm-orgchart-state { position: absolute; top: var(--hm-orgchart-resolved-spacing-lg); left: var(--hm-orgchart-resolved-spacing-lg); z-index: 1; margin: 0; } .hm-orgchart-expanded[data-presentation-mode="chart-only"] { display: block; height: 100%; padding: 0; border: 0; border-radius: 0; background: var(--hm-orgchart-resolved-bg-surface); } .hm-orgchart-expanded[data-presentation-mode="chart-only"] .hm-orgchart-viewport { height: 100%; min-height: 320px; border: 0; border-radius: 0; } .hm-orgchart-expanded[data-presentation-mode="chart-only"] .hm-orgchart-viewport:focus-visible { outline-offset: -2px; } /* Live move status remains available to assistive technology only. */ .hm-orgchart-expanded[data-presentation-mode="chart-only"] .hm-orgchart-move-feedback { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .hm-orgchart-expanded .hm-orgchart-viewport[data-placement-pending] .hm-orgchart-forest { visibility: hidden; }