/* Generation-row org chart. Tree is never inside Unplaced/Share. */
#share-panel.is-collapsed > .panel-body,
#help-panel.is-collapsed > .panel-body,
#people-tray.is-collapsed > .panel-body {
  display: none !important;
}
#share-panel #hc-chart,
#help-panel #hc-chart,
#people-tray #hc-chart,
.is-collapsed #hc-chart,
.panel-body #hc-chart {
  display: block !important;
  visibility: visible !important;
}
#hc-chart,
#hc-chart.tree-canvas,
#hc-chart[data-tree-canvas] {
  display: block !important;
  visibility: visible !important;
  position: relative !important;
  width: 100% !important;
  min-height: 80vh !important;
  height: 80vh !important;
  max-height: none !important;
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: none;
  cursor: grab;
  background:
    repeating-linear-gradient(
      180deg,
      #eef6f3 0,
      #eef6f3 1px,
      #f7fbfa 1px,
      #f7fbfa 196px
    ) !important;
  border: 1px solid #d5e4e0;
  border-radius: 14px;
  z-index: 1;
}
#hc-chart.is-panning {
  cursor: grabbing;
}
#hc-chart .fam-person,
#hc-chart .hc-handle,
#hc-chart .hc-edit,
#hc-chart button {
  cursor: pointer;
}
#hc-chart #hc-scale-wrap {
  position: relative !important;
  display: block !important;
  min-width: 100%;
  min-height: 80vh;
  transform-origin: 0 0;
  will-change: transform;
}
#hc-chart #gen-board {
  position: relative !important;
  display: block !important;
  min-width: 100%;
  min-height: 80vh;
}
#hc-chart .gen-unit {
  position: absolute;
  left: auto;
  top: auto;
  z-index: 2;
  margin: 0;
}
#hc-chart .fam-couple,
#hc-chart .fam-mates {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#hc-chart .fam-mates-extra {
  margin-top: 12px;
}
#hc-chart .fam-person {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  min-height: 100px !important;
  height: auto !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid #c5d4d0 !important;
  border-left: 5px solid #0b6f65 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(20, 32, 51, 0.07) !important;
  overflow: visible !important;
}
#hc-chart .fam-person.is-spouse {
  border-left-color: #1e3a5f !important;
}
#hc-chart .fam-person.is-focus {
  background: #f3faf8 !important;
  box-shadow: 0 0 0 2px #0b6f65, 0 6px 14px rgba(11, 111, 101, 0.16) !important;
}
#hc-chart .fam-photo-wrap {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
}
#hc-chart .fam-photo,
#hc-chart .fam-photo-empty {
  width: 56px !important;
  height: 56px !important;
  border-radius: 8px !important;
  object-fit: cover;
  background: #d7ece7;
  border: 0 !important;
  box-shadow: none !important;
}
#hc-chart .fam-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  max-height: none;
  overflow: visible;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  white-space: normal;
}
#hc-chart .hc-handle {
  pointer-events: auto !important;
  z-index: 90 !important;
}
#hc-chart .hc-handle-delete {
  opacity: 1 !important;
  visibility: visible !important;
  display: grid !important;
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}
#hc-chart .fam-nick,
#hc-chart .fam-meta {
  font-size: 11px;
  text-align: left;
  color: #5b6b68;
}
#hc-chart .fam-union {
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  align-self: stretch !important;
  min-height: 100px !important;
  position: relative;
}
#hc-chart .fam-spouse-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  border-top: 4px solid #1e3a5f !important;
}
#hc-chart .fam-union-nub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: #1e3a5f !important;
  border-radius: 50%;
}
#hc-chart .fam-natal {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}
#hc-chart .hc-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
#hc-chart .hc-wires line.hc-wire-spouse { stroke: #1e3a5f; stroke-width: 4; }
#hc-chart .hc-wires line.hc-wire-child { stroke: #0d5c45; stroke-width: 3; }
#hc-chart .hc-wires line.hc-wire-sibling { stroke: #6d28d9; stroke-width: 2.6; }
.tree-chrome {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
}
.people-tray.is-collapsed {
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}