/* ==========================================================================
   HERO + BACKGROUND HERITAGE TREE + TREE EXPLORER
   ========================================================================== */

/* ---- hero ------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-heritage); color: #F4F1EA;
  padding-block: var(--sp-24) var(--sp-16); min-block-size: min(88vh, 780px);
  display: flex; align-items: center;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2; opacity: .30;
  pointer-events: none; overflow: hidden;
}
.hero__bg svg { inline-size: 100%; block-size: 100%; }
/* Vignette keeps text readable over the tree (brief §6) */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(15,26,24,.72) 0%, rgba(15,26,24,.25) 55%, transparent 100%),
    linear-gradient(180deg, rgba(15,26,24,.35) 0%, transparent 30%, rgba(15,26,24,.55) 100%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; text-align: center; }
.hero__crest { inline-size: 62px; block-size: 62px; margin: 0 auto var(--sp-6); opacity: .95; }
.hero h1 {
  font-size: clamp(2.25rem, 5.5vw, var(--text-display));
  line-height: var(--lh-display); color: #fff; letter-spacing: -.01em;
}
.hero__title-ur {
  font-family: var(--font-display-ur); direction: rtl; unicode-bidi: isolate;
  font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.9; color: var(--heritage-gold-soft);
  margin-bottom: var(--sp-3);
}
.hero__lede { color: #CFC9BD; font-size: 1.0625rem; max-inline-size: 58ch;
              margin: var(--sp-4) auto var(--sp-8); }
.hero__search { max-inline-size: 620px; margin-inline: auto; }
.hero__actions { display: flex; gap: var(--sp-3); justify-content: center;
                 flex-wrap: wrap; margin-top: var(--sp-6); }
.hero__stats { display: flex; gap: var(--sp-8); justify-content: center;
               flex-wrap: wrap; margin-top: var(--sp-12);
               padding-top: var(--sp-8); border-top: 1px solid rgba(255,255,255,.14); }
.hero__stat { text-align: center; }
.hero__stat b { display: block; font-family: var(--font-display); font-size: 1.75rem;
                color: var(--heritage-gold-soft); line-height: 1.2; }
.hero__stat span { font-size: var(--text-caption); color: #A8A296;
                   letter-spacing: .06em; text-transform: uppercase; }
:root[lang="ur"] .hero__stat span { letter-spacing: normal; text-transform: none; }

/* animated growth of the background tree - disabled under reduced-motion */
.hero__bg .branch {
  stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400);
  animation: grow 2.6s var(--ease) forwards;
}
.hero__bg .leafnode { opacity: 0; animation: bloom .8s var(--ease) forwards; }
@keyframes grow { to { stroke-dashoffset: 0; } }
@keyframes bloom { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero__bg .branch { stroke-dashoffset: 0; animation: none; }
  .hero__bg .leafnode { opacity: 1; animation: none; }
}

/* ---- tree explorer ---------------------------------------------------- */
.tree-shell {
  position: relative; background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  overflow: hidden; block-size: clamp(460px, 68vh, 760px);
  touch-action: none;
}
.tree-canvas { position: absolute; inset: 0; cursor: grab; }
.tree-canvas:active { cursor: grabbing; }
.tree-canvas svg { position: absolute; inset-block-start: 0; inset-inline-start: 0;
                   overflow: visible; }

.tree-toolbar {
  position: absolute; inset-block-start: var(--sp-4); inset-inline-start: var(--sp-4);
  z-index: 10; display: flex; gap: var(--sp-2); flex-wrap: wrap;
  background: var(--surface-overlay); padding: var(--sp-2);
  border: 1px solid var(--border-subtle); border-radius: var(--r-full);
  box-shadow: var(--shadow-2);
}
.tree-zoom {
  position: absolute; inset-block-end: var(--sp-4); inset-inline-end: var(--sp-4);
  z-index: 10; display: flex; flex-direction: column; gap: var(--sp-1);
  background: var(--surface-overlay); padding: var(--sp-1);
  border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
.tree-legend {
  position: absolute; inset-block-end: var(--sp-4); inset-inline-start: var(--sp-4);
  z-index: 10; display: flex; gap: var(--sp-4); flex-wrap: wrap;
  background: var(--surface-overlay); padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border-subtle); border-radius: var(--r-full);
  box-shadow: var(--shadow-2); font-size: var(--text-caption); color: var(--text-secondary);
}
.tree-legend i { display: inline-block; inline-size: 10px; block-size: 10px;
                 border-radius: var(--r-full); margin-inline-end: 5px; }

/* SVG node styling */
.tnode { cursor: pointer; }
.tnode__box {
  fill: var(--surface-raised); stroke: var(--border-subtle); stroke-width: 1.5;
  transition: stroke var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.tnode:hover .tnode__box { stroke: var(--heritage-gold); filter: brightness(1.02); }
.tnode--focus .tnode__box { stroke: var(--heritage-gold); stroke-width: 3; }
.tnode--male .tnode__accent   { fill: var(--identity-male); }
.tnode--female .tnode__accent { fill: var(--identity-female); }
.tnode--unknown .tnode__accent{ fill: var(--identity-unknown); }
.tnode--deceased .tnode__box  { fill: var(--surface-sunken); stroke-dasharray: 4 3; }
.tnode__name { font-family: var(--font-display); font-size: 13px; font-weight: 600;
               fill: var(--text-primary); }
.tnode__name--ur { font-family: var(--font-display-ur); font-size: 13px;
                   direction: rtl; }
.tnode__father { font-family: var(--font-body); font-size: 10.5px; fill: var(--text-secondary); }
.tnode__unnamed { font-family: var(--font-body); font-size: 11px; font-style: italic;
                  fill: var(--text-muted); }
.tlink { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.tlink--path { stroke: var(--heritage-gold); stroke-width: 2.5; }
.tnode__expand { fill: var(--heritage-deep); }
.tnode__expand-txt { fill: #fff; font-size: 11px; font-family: var(--font-body);
                     text-anchor: middle; font-weight: 700; }

/* mobile tree: focused list navigation instead of a cramped canvas (brief §14) */
.tree-mobile { display: none; }
@media (max-width: 720px) {
  .tree-shell { display: none; }
  .tree-mobile { display: block; }
}
.tree-level { margin-bottom: var(--sp-6); }
.tree-level__label {
  font-size: var(--text-caption); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--heritage-gold); margin-bottom: var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-3);
}
:root[lang="ur"] .tree-level__label { letter-spacing: normal; text-transform: none; }
.tree-level__label::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

/* ---- relationship path ------------------------------------------------ */
.relpath { list-style: none; padding: 0; margin: 0; }
.relpath li {
  position: relative; padding-inline-start: var(--sp-8); padding-block: var(--sp-3);
}
.relpath li::before {
  content: ""; position: absolute; inset-inline-start: 9px; inset-block-start: 0;
  block-size: 100%; inline-size: 2px; background: var(--border-subtle);
}
.relpath li:first-child::before { inset-block-start: 50%; block-size: 50%; }
.relpath li:last-child::before  { block-size: 50%; }
.relpath li::after {
  content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: calc(50% - 6px);
  inline-size: 12px; block-size: 12px; border-radius: var(--r-full);
  background: var(--surface-raised); border: 2px solid var(--heritage-gold);
}
.relpath li[data-role="you"]::after,
.relpath li[data-role="target"]::after { background: var(--heritage-gold); }
.relpath__rel { font-size: var(--text-caption); color: var(--text-muted); }

.rel-result {
  background: var(--grad-heritage); color: #F2EFE8; border-radius: var(--r-xl);
  padding: var(--sp-8); text-align: center; box-shadow: var(--shadow-3);
}
.rel-result__label { font-size: var(--text-caption); letter-spacing: .14em;
                     text-transform: uppercase; color: var(--heritage-gold-soft); }
:root[lang="ur"] .rel-result__label { letter-spacing: normal; text-transform: none; }
.rel-result__value { font-family: var(--font-display); font-size: clamp(1.5rem, 3.5vw, 2.25rem);
                     color: #fff; margin-block: var(--sp-3); line-height: 1.25; }
.rel-result__meta { display: flex; gap: var(--sp-6); justify-content: center;
                    flex-wrap: wrap; margin-top: var(--sp-6);
                    padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,.16); }
.rel-result__meta div { text-align: center; }
.rel-result__meta b { display: block; color: var(--heritage-gold-soft);
                      font-family: var(--font-display); font-size: var(--text-h3); }
.rel-result__meta span { font-size: var(--text-caption); color: #A8A296; }

.person-picker { position: relative; }
.picked {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
  border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  background: var(--surface-sunken);
}

/* ---- profile ---------------------------------------------------------- */
.profile-head { background: var(--grad-heritage); color: #F0EDE6; padding-block: var(--sp-12); }
.profile-head__row { display: flex; gap: var(--sp-6); align-items: center; flex-wrap: wrap; }
.profile-head h1 { color: #fff; font-size: clamp(1.75rem, 4vw, var(--text-display)); }
.profile-head .person-name-ur { color: var(--heritage-gold-soft); font-size: 1.5rem; }
.profile-head__father { color: #C9C3B8; font-size: var(--text-body); margin-top: var(--sp-2); }
.profile-grid { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
@media (min-width: 900px) { .profile-grid { grid-template-columns: 2fr 1fr; } }
.factlist { display: grid; gap: var(--sp-3); }
.factlist div { display: flex; justify-content: space-between; gap: var(--sp-4);
                padding-block: var(--sp-2); border-bottom: 1px solid var(--border-subtle);
                font-size: var(--text-small); }
.factlist dt { color: var(--text-secondary); }
.factlist dd { margin: 0; font-weight: 600; text-align: end; }
.factlist dd.is-empty { font-weight: 400; color: var(--text-muted); font-style: italic; }