/* Family Tree modal — vertical, scrollable, generation per row.
   Cards highlight rulers with a thicker border. */

/* Naked emoji-only button used to open the FamilyTree modal — no border,
   no background, no hover shading. Used on the play screen header and
   inside the Past Dynasties modal rows. */
.ftree-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

.ftree-trigger:hover,
.ftree-trigger:focus {
  outline: none;
}

/* FamilyTree-specific styling on top of the shared modal-fullscreen
   layout. The size/position of the overlay comes from modal-fullscreen
   (in modals.css) — this file only touches FamilyTree's inner content. */

/* No inner max-height/overflow — the modal-fullscreen container
   handles scrolling so there's one scrollbar anchored to the panel
   edge, matching the main UI. */
.ftree-modal {
  padding: 0.25rem 0.25rem 0.5rem;
}

/* House-name heading. No solid backing — it floats over the modal's
   parchment surface and scrolls with the tree. (Dropped the old sticky
   banner + opaque fill + hairline: with a transparent background a
   pinned banner would let generations show through as they scrolled
   underneath, so it's a plain scrolling title now.) */
.ftree-house-name {
  margin: 0 0 1rem;
  padding: 0.4rem 0;
  text-align: center;
  /* Sub-header tier — Cardo. Uppercase house-name heading above the tree. */
  font-family: var(--font-family-2);
  font-size: 1.1rem;
  color: #6a5a4a;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Canvas wraps the generation stack + the SVG connector overlay. It's the
   positioning context the connector geometry is measured against (see
   drawConnectors). */
.ftree-canvas {
  position: relative;
}

/* SVG connector overlay — sits behind the boxes so lines tuck under the
   box borders rather than crossing over them. pointer-events: none so the
   boxes underneath stay clickable. */
.ftree-lines {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* The genealogy connector strokes. Same warm tan as the old divider. */
.ftree-conn {
  stroke: #c8b890;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* The generation boxes sit above the line overlay. */
.ftree-stack {
  position: relative;
  z-index: 1;
}

.ftree-generation {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.25rem;
}

.ftree-couple {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Inline child + their spouse, rendered inside the siblings row. Visually
   reads as a single child cell — the rings glyph is smaller so it
   doesn't shout, and the two boxes hug each other tighter than the
   parent couple. Flex-wrap is off so the pair stays glued together; if
   the row gets too wide, the cluster wraps as a unit. */
.ftree-child-couple {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
}

.ftree-bond {
  position: relative;   /* anchors the married-couple bond point */
  font-size: 1rem;
  color: var(--font-color-2);
  user-select: none;
}

.ftree-bond-small {
  font-size: 0.85rem;
}

/* Bond anchor — a zero-size measurement point the connector pass reads to
   find where the line to the children originates. Married couple: pinned
   to the bottom-center of the ⚭ glyph (its parent .ftree-bond is
   position: relative). Lone ruler: pinned to the bottom-center of the
   single box (see .ftree-couple-single). Invisible. */
.ftree-bond-anchor {
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  bottom: 0;
}

/* Lone-ruler couple — the anchor is a sibling of the box; make this the
   positioning context so the anchor drops to the box's bottom-center. */
.ftree-couple-single {
  position: relative;
}

/* Gap below the couple where the SVG connector structure (vertical drop +
   horizontal bus + risers) is drawn. The connectors are an SVG overlay
   (see .ftree-lines / drawConnectors), not DOM dividers. */
.ftree-children-wrap {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ftree-children {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Blank vertical spacer between a ruler's sibling row and that ruler's
   own (duplicated) box in the next generation. No line — the connector
   from the generation above already points at this child where they sit
   in the sibling row above. */
.ftree-gen-gap {
  height: 1.5rem;
  margin: 0.25rem auto 0.5rem;
}

/* Base treatment = "outside the house" — used for spouses of children
   who married in but never became a ruler's spouse. Tan-on-tan reads as
   "adjacent to the family, not of it." */
.ftree-person {
  position: relative;   /* positioning context for the ruler crown badge */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Bottom padding is ~2px less than top so the name + dates sit
     slightly lower in the box, giving the (smaller) icon more
     breathing room above without growing the overall footprint. */
  padding: 0.4rem 0.4rem 0.275rem;
  background: var(--background-color-1);
  border: 1px solid #c8b890;
  border-radius: 4px;
  min-width: 76px;
  max-width: 98px;
  text-align: center;
}

/* Tiny crown in the upper-left corner of a ruler's box, on top of the
   gold outline. Nudged slightly outside the corner so it reads as a
   badge rather than crowding the icon. */
.ftree-crown {
  position: absolute;
  /* Nudged 5px down + right from the corner. */
  top: calc(-0.45rem + 5px);
  left: calc(-0.3rem + 5px);
  font-size: 0.85rem;
  line-height: 1;
  pointer-events: none;
}

/* In-house: rulers, ruler-spouses, and bloodline children. White card
   pops against the tan background of married-in spouses. */
.ftree-person.ftree-in-house {
  background: var(--background-color-3);
}

/* Rulers get a thick gold border on top of the in-house white. The gold
   ring is the "this person wore the crown" signal — applied to past
   rulers, the current ruler, and the heir (who's tagged as next ruler
   at render time). */
.ftree-person.ftree-ruler {
  border-width: 4px;
  border-color: #c89b3c;
}

.ftree-person.ftree-deceased {
  opacity: 0.78;
}

.ftree-icon {
  font-size: 1.35rem;
  line-height: 1;
  /* Box is text-aligned center already; explicit width + flex centering
     keeps the icon visually centered inside the person card even when
     the emoji glyph has uneven bearings. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 0.15rem;
}

.ftree-name {
  font-size: 0.8rem;
  color: var(--font-color-1);
  line-height: 1.15;
}

.ftree-name.ftree-ruler-name {
  font-weight: 600;
}

.ftree-dates {
  font-size: 0.7rem;
  color: #6a5a4a;
  margin-top: 0.1rem;
  font-style: italic;
}

.ftree-empty {
  text-align: center;
  color: var(--font-color-2);
  font-style: italic;
}