/* ============================================================
   Iowa's Little Ireland. Family Tree (anchored pedigree / hourglass)
   Layout and positioning ONLY for the SVG hourglass. Every value comes
   from melrose-tokens.css custom properties; there are ZERO hardcoded
   hex colors here. The shared chrome (nav, head, toolbar, search,
   loading, legend, focusbar, info, footer) is styled by maps.css and is
   not restyled here.

   Style rule: no em dashes or en dashes anywhere in copy.
   ============================================================ */

/* ---- the single pan/zoom viewport fills the chart stage ---- */
#pedigree {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--cream);
  cursor: grab;
  touch-action: none;          /* let d3.zoom own pinch + drag on touch */
  outline: none;
}
#pedigree:active { cursor: grabbing; }
#pedigree:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }

/* the zoom group + the box/link sublayers carry no paint of their own */
.ped-zoom, .ped-links, .ped-boxes { pointer-events: visiblePainted; }

/* ============================================================
   CONNECTORS (orthogonal elbows + marriage bars)
   Stroke PATTERN carries the EDGE tier (solid / dashed / dotted) so
   trust is conveyed by line shape, not color alone. Blood links use
   the green link token; spouse links use the gold one.
   ============================================================ */
.ped-link {
  fill: none;
  stroke: var(--green-mid);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.55;
}
.ped-link.spouse {
  stroke: var(--gold);
  stroke-width: 1.6;
  opacity: 0.75;
}
/* tier patterns (match the how-related tier key: solid / dashed / dotted) */
.ped-link.tier-confirmed   { stroke-dasharray: none; stroke-width: 1.8; }
.ped-link.tier-probable    { stroke-dasharray: 6 4; }
.ped-link.tier-unconfirmed { stroke-dasharray: 1.5 4; opacity: 0.5; }

.ped-marriage-year {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-style: italic;
  fill: var(--ink-light);
  pointer-events: none;
}

/* ============================================================
   PERSON BOX (a real <a> link)
   ============================================================ */
.ped-box { cursor: pointer; }
.ped-box .pb-rect {
  fill: var(--cream);
  stroke: var(--gold);
  stroke-width: 1.2;
  filter: drop-shadow(var(--shadow-sm));
  transition: stroke var(--transition), stroke-width var(--transition);
}
.ped-box .pb-stripe { opacity: 0.92; }

/* name + dates live in a foreignObject so we reuse the maiden HTML span */
.pb-fo { overflow: visible; }
.pb-label {
  font-family: var(--ff-body);
  color: var(--ink);
  line-height: 1.18;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}
.pb-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--green-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-name .maiden { font-style: italic; opacity: 0.65; }
.pb-years {
  font-size: var(--fs-xs);
  color: var(--ink-light);
  white-space: nowrap;
}
.pb-badge { margin-top: var(--space-1); transform: scale(0.86); transform-origin: left center; }

/* focus + hover + keyboard-focus outlines */
.ped-box.is-focus .pb-rect {
  stroke: var(--green-deep);
  stroke-width: 2.6;
}
.ped-box:hover .pb-rect { stroke: var(--green-mid); stroke-width: 2; }
.ped-box:focus-visible { outline: none; }
.ped-box:focus-visible .pb-rect {
  stroke: var(--gold);
  stroke-width: 2.6;
}
/* living box: name-only, quieter so it reads as withheld */
.ped-box.is-living .pb-rect { stroke-dasharray: 4 3; }
.ped-box.is-living .pb-name { color: var(--ink-mid); font-style: italic; }

/* flash highlight when a reference chip pans to the canonical box */
.ped-box.flash .pb-rect {
  animation: ped-flash 1.2s ease-out 1;
}
@keyframes ped-flash {
  0%   { stroke: var(--gold); stroke-width: 4; }
  100% { stroke: var(--gold); stroke-width: 1.2; }
}

/* "+N more" expand chevron */
.pb-more { cursor: pointer; }
/* invisible hit-slop: transparent paint, but a real pointer target. On fine
   pointers it stays out of the way (the visible chevron is the affordance); on
   coarse pointers it grows the tap area to clear the 44px touch floor. */
.pb-more-hit, .pc-hit {
  fill: var(--cream);
  fill-opacity: 0;
  pointer-events: none;
  stroke: none;
}
.pb-more .pb-more-bg {
  fill: var(--parchment);
  stroke: var(--gold);
  stroke-width: 1;
  transition: fill var(--transition);
}
.pb-more:hover .pb-more-bg, .pb-more:focus-visible .pb-more-bg {
  fill: var(--gold-pale);
}
.pb-more:focus-visible { outline: none; }
.pb-more .pb-more-tx {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  fill: var(--green-mid);
  pointer-events: none;
}

/* ============================================================
   REFERENCE CHIP (a repeat encounter, drawn smaller + distinct)
   ============================================================ */
.ped-chip { cursor: pointer; }
.ped-chip .pc-rect {
  fill: var(--parchment);
  stroke: var(--gold);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  transition: fill var(--transition), stroke var(--transition);
}
.ped-chip:hover .pc-rect, .ped-chip:focus-visible .pc-rect {
  fill: var(--gold-pale);
  stroke: var(--green-mid);
}
.ped-chip:focus-visible { outline: none; }
.pc-fo { overflow: visible; }
.pc-label {
  font-family: var(--ff-body);
  line-height: 1.05;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}
.pc-also {
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--ink-light);
  letter-spacing: 0.02em;
}
.pc-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   INFO PANEL EXTRAS (re-uses maps.css #info; only the new bits here)
   ============================================================ */
#info-page { margin-right: var(--space-3); }
.i-reanchor { font-weight: 600; }

/* ============================================================
   RESPONSIVE: tighter on mobile, comfortable touch targets,
   tap-to-reveal instead of hover.
   ============================================================ */
@media (max-width: 768px) {
  #zoom-controls { gap: var(--space-2); }
  /* keep the toolbar buttons a comfortable tap height */
  #zoom-controls .btn { min-height: 44px; }
  /* on touch the box outline reveals on active (tap) rather than hover */
  .ped-box:active .pb-rect { stroke: var(--green-mid); stroke-width: 2.4; }
  .ped-chip:active .pc-rect { fill: var(--gold-pale); }
  /* a roomier tap area under each more-chevron */
  .pb-more .pb-more-bg { stroke-width: 1.4; }
}

@media (hover: none) {
  /* pointer-coarse devices: bigger hit slop on the chevron + chip */
  .pb-more, .ped-chip { touch-action: manipulation; }
  /* activate the transparent hit-slop so taps land anywhere in the 44px slop,
     not only on the small visible chip/chevron. */
  .pb-more-hit, .pc-hit { pointer-events: all; }
}

/* honor reduced-motion: no flash animation, no zoom easing surprises */
@media (prefers-reduced-motion: reduce) {
  .ped-box.flash .pb-rect { animation: none; }
  .ped-box .pb-rect, .ped-link, .pb-more .pb-more-bg, .ped-chip .pc-rect { transition: none; }
}

/* ============================================================
   PRINT: expand to the full bounds, drop the chrome, keep it crisp.
   Living boxes already carry nothing private (name-only), so print is
   safe by construction.
   ============================================================ */
@media print {
  .site-nav, .map-toolbar, #legend, #focusbar, #info,
  .site-footer, #loading, .nav-toggle { display: none !important; }
  .map-head { border: none; }
  #stage {
    position: static;
    overflow: visible;
    min-height: 0;
    height: auto;
  }
  #pedigree {
    position: static;
    width: 100%;
    height: auto;
    background: var(--white);
  }
  /* drop interactive affordances + drop shadows for clean ink */
  .ped-box .pb-rect { filter: none; }
  .pb-more { display: none !important; }
  .ped-box, .ped-chip { cursor: default; }
}