/* The garden read as generational bands. No connector lines between people, by
   design: ranks are inferred, so lines would assert lineages the gardener never
   made. Generation is carried by position, grouping and rhythm instead.
   Rationale: docs/features/plant-relationships/overview.md#key-design-decisions */

.pc-family-tree {
  --pc-ft-rail: 0.375rem;
  --pc-ft-gutter: 1.5rem;
}

.pc-family-tree__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lore-space-3);
  margin-bottom: var(--lore-space-5);
}

.pc-family-tree__title {
  font-size: var(--lore-text-heading);
  margin: 0;
}

.pc-family-tree__intro {
  font-size: var(--lore-text-small);
  color: var(--lore-ink-soft);
  margin: calc(var(--lore-space-4) * -1) 0 var(--lore-space-5);
}

/* One continuous stem behind the bands, ticked once per generation. It joins
   generations, never two people. */
.pc-family-tree__bands {
  position: relative;
  display: grid;
  gap: var(--lore-space-6);
}

.pc-family-tree__bands::before {
  content: "";
  position: absolute;
  left: var(--pc-ft-rail);
  top: 0.45rem;
  bottom: 0.75rem;
  width: 1px;
  background: color-mix(in oklab, var(--lore-border-strong) 75%, transparent);
}

.pc-family-tree__band {
  position: relative;
  padding-left: var(--pc-ft-gutter);
}

.pc-family-tree__band::before {
  content: "";
  position: absolute;
  left: 0.1875rem;
  top: 0.28rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--lore-border-strong);
  box-shadow: 0 0 0 4px var(--lore-surface);
}

/* The gardener's own generation is the anchor the rest is read outward from */
.pc-family-tree__band--anchor::before {
  left: 0.09375rem;
  top: 0.22rem;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--lore-brand);
}

.pc-family-tree__band-label {
  font-family: var(--lore-font-ui);
  font-size: var(--lore-text-caption);
  font-weight: var(--lore-weight-semibold);
  letter-spacing: 0.04em;
  line-height: var(--lore-leading-tight);
  color: var(--lore-ink-soft);
  text-wrap: pretty;
  margin: 0 0 var(--lore-space-3);
}

.pc-family-tree__band--anchor .pc-family-tree__band-label {
  color: var(--lore-brand);
}

/* Bands wrap rather than scroll, so an eight-person band becomes two rows and
   the page never scrolls sideways */
.pc-family-tree__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: var(--lore-space-3);
  align-items: start;
}

.pc-family-tree__group {
  border: 1px solid var(--lore-border);
  border-radius: var(--lore-radius-lg);
  background: var(--lore-surface-raised);
  box-shadow: var(--lore-shadow-sm);
  overflow: hidden;
  transition: transform var(--lore-dur-ui) var(--lore-ease),
              box-shadow var(--lore-dur-ui) var(--lore-ease);
}

.pc-family-tree__group:hover {
  transform: translateY(-2px);
  box-shadow: var(--lore-shadow-lg);
}

.pc-family-tree__group--self {
  border-color: color-mix(in oklab, var(--lore-brand) 42%, var(--lore-border));
}

.pc-family-tree__person {
  display: flex;
  align-items: center;
  gap: var(--lore-space-3);
  padding: var(--lore-space-3);
  color: inherit;
  text-decoration: none;
  transition: background var(--lore-dur-ui) var(--lore-ease);
}

.pc-family-tree__person:hover {
  color: inherit;
  background: color-mix(in oklab, var(--pc-stage-soft) 55%, var(--lore-surface-raised));
}

/* Growth reuses the plant card's vocabulary at tree density: a stage wash with
   a seed that grows across the five stages, sized off the same --pc-aura-size.
   Never a lack, only a size. */
.pc-family-tree__aura {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pc-stage-soft);
}

.pc-family-tree__seed {
  width: calc(var(--pc-aura-size) * 1.6);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%,
              color-mix(in oklab, var(--pc-stage) 55%, var(--lore-surface-raised)),
              var(--pc-stage));
}

.pc-family-tree__person-text {
  min-width: 0;
}

.pc-family-tree__name {
  display: block;
  color: var(--lore-ink);
  font-family: var(--lore-font-display);
  font-size: var(--lore-text-body);
  font-weight: var(--lore-weight-semibold);
  line-height: var(--lore-leading-tight);
  margin: 0;
}

.pc-family-tree__status {
  display: block;
  font-size: var(--lore-text-caption);
  color: var(--lore-ink-soft);
  margin: 0.125rem 0 0;
}

/* "Remembered" borrows the plant card's italic serif — never dimmed or badged */
.pc-family-tree__status--passed {
  font-family: var(--lore-font-display);
  font-style: italic;
}

.pc-family-tree__status--self {
  color: var(--lore-brand);
  font-weight: var(--lore-weight-semibold);
}

/* Satellites sit inside their host's card so "whose friend is this?" needs no
   legend. Visibly secondary, still full links. */
.pc-family-tree__orbit {
  list-style: none;
  margin: 0;
  padding: var(--lore-space-2) var(--lore-space-3) calc(var(--lore-space-2) + 0.125rem);
  display: grid;
  gap: 0.25rem;
  background: var(--lore-surface-sunken);
  border-top: 1px solid var(--lore-border);
}

.pc-family-tree__satellite {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.375rem;
}

.pc-family-tree__satellite-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4375rem;
  font-family: var(--lore-font-display);
  font-size: var(--lore-text-small);
  font-weight: var(--lore-weight-medium);
  color: var(--lore-ink);
  text-decoration: none;
}

.pc-family-tree__satellite-link:hover {
  color: var(--lore-ink);
  text-decoration: underline;
}

.pc-family-tree__spark {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--pc-stage);
  transform: translateY(-0.0625rem);
}

.pc-family-tree__kin {
  font-size: var(--lore-text-caption);
  color: var(--lore-ink-soft);
}

/* Outside the stem, because it isn't a generation — but the same cards at the
   same size, never a leftovers bin */
.pc-family-tree__around {
  margin-top: var(--lore-space-6);
  padding-top: var(--lore-space-5);
  padding-left: var(--pc-ft-gutter);
  border-top: 1px solid var(--lore-border);
}

.pc-family-tree__around-note {
  font-size: var(--lore-text-caption);
  color: var(--lore-ink-faint);
  margin: -0.375rem 0 var(--lore-space-3);
}

@media (prefers-reduced-motion: reduce) {
  .pc-family-tree__group {
    transition: none;
  }

  .pc-family-tree__group:hover {
    transform: none;
  }
}