/* The family tree page. Everything is scoped to .tree-page so it doesn't
   change the shared site header and footer from site.css. */

.tree-page {
  --paper: #f6f4ee;
  --surface: #fbfaf7;
  --card: #ffffff;
  --ink: #1d2521;
  --ink-soft: #3a4540;
  --muted: #69716b;
  --line: #e1ddd3;
  --line-strong: #56625c;
  --green: #1f4a39;
  --green-hover: #173a2c;
  --green-tint: #e5ece7;
  --avatar: #e9e5db;
  --avatar-ink: #3c4842;
  --leaf: #c9cfc2;
  --shadow: 0 1px 2px rgba(29, 37, 33, 0.06), 0 4px 14px rgba(29, 37, 33, 0.07);
  --shadow-lg: 0 12px 40px rgba(29, 37, 33, 0.16);
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --header-h: 70px; /* matches .header in site.css */
  --panel-w: 392px;

  display: block;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.tree-page button, .tree-page input, .tree-page select { font: inherit; color: inherit; }
.tree-page button { cursor: pointer; }
.tree-page a { color: var(--green); text-decoration: underline; }

.tree-page :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Layout ---------- */

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
}

.app[hidden] { display: none; }

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* ---------- Hero + controls ---------- */

.tree-hero {
  padding: 26px 28px 20px 44px;
  border-bottom: 1px solid var(--line);
}

.tree-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.tree-hero .tagline {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: clamp(19px, 1.8vw, 25px);
  color: var(--muted);
}

.tree-hero .about-link {
  margin-left: 6px;
  font-family: var(--sans);
  font-size: 15px;
  white-space: nowrap;
  text-underline-offset: 3px;
}

/* "Start from" family buttons: a segmented control. */
.family-switch {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 16px;
}

.family-switch > span {
  margin-right: 12px;
  color: var(--muted);
  font-size: 15px;
}

.family-switch button {
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font-size: 15px;
  white-space: nowrap;
}

.family-switch button + button { margin-left: -1px; }
.family-switch span + button { border-radius: 8px 0 0 8px; }
.family-switch button:last-child { border-radius: 0 8px 8px 0; }
.family-switch button:hover { background: var(--green-tint); color: var(--ink); }
.family-switch button[aria-pressed="true"] { position: relative; border-color: var(--green); background: var(--green); color: #fff; }
.family-switch button[hidden] { display: none; }

.controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 16px;
  white-space: nowrap;
}

.stat-chip strong { color: var(--green); font-weight: 600; }

.search {
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
  margin-left: auto;
}

.search > svg {
  position: absolute;
  left: 16px; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.search input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  font-size: 16px;
}

.search input::placeholder { color: #8b928c; }
.search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(31, 74, 57, 0.14); }

.search-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: min(420px, 60vh);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-lg);
}

.search-results[hidden] { display: none; }

.search-results li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
}

.search-results li[aria-selected="true"], .search-results li:hover { background: var(--green-tint); }
.search-results .avatar { width: 36px; height: 36px; font-size: 14px; }
.search-results .result-name { font-weight: 600; }
.search-results .result-meta { color: var(--muted); font-size: 14px; }
.search-results .empty { color: var(--muted); cursor: default; }
.search-results .empty:hover { background: none; }

.select {
  position: relative;
  flex-shrink: 0;
}

.select select {
  height: 48px;
  padding: 0 44px 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  font-size: 16px;
  appearance: none;
  cursor: pointer;
}

.select svg {
  position: absolute;
  right: 16px; top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ---------- Tree canvas ---------- */

.canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.canvas.dragging { cursor: grabbing; }

.sprig {
  position: absolute;
  color: var(--leaf);
  opacity: 0.55;
  pointer-events: none;
}

.sprig.a { top: -10px; left: -30px; width: 280px; transform: rotate(-12deg); }
.sprig.b { top: 60px; right: -40px; width: 220px; transform: scaleX(-1) rotate(-20deg); }
.sprig.c { bottom: 10px; left: -40px; width: 240px; transform: rotate(30deg); }

.stage {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.stage.animate { transition: transform 420ms cubic-bezier(.2, .7, .2, 1); }

.links {
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
  pointer-events: none;
}

.links path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.4;
}

.links path.uncertain { stroke-dasharray: 6 5; }

/* ---------- Person cards ---------- */

.card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: border-color 120ms, box-shadow 120ms;
}

.card:hover { border-color: #b9c2bb; box-shadow: 0 2px 4px rgba(29,37,33,.07), 0 8px 22px rgba(29,37,33,.1); }

.card.selected {
  border: 2px solid var(--green);
  padding: 9px 11px;
  box-shadow: 0 0 0 3px rgba(31, 74, 57, 0.1), var(--shadow);
}

.card.ancestor { background: #fdfcf9; }

.card-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
}

.card-hit:focus-visible { outline-offset: 3px; }

.avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--avatar);
  color: var(--avatar-ink);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(60, 72, 66, 0.08);
}

.card-text { min-width: 0; flex: 1; }

.card-name {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.15;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-years {
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toggle {
  position: relative;
  z-index: 2;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 28px; height: 28px;
  padding: 0;
  border: 1px solid #c5ccc6;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-soft);
}

.toggle:hover { border-color: var(--green); color: var(--green); }
.toggle svg { width: 14px; height: 14px; }
.toggle.open { border-color: var(--green); background: var(--green); color: #fff; }
.toggle .count { font-size: 11px; font-weight: 600; }

/* ---------- Canvas overlays ---------- */

.zoom-bar {
  position: absolute;
  left: 24px; bottom: 22px;
  z-index: 5;
  display: flex;
  gap: 14px;
}

.button-group {
  display: flex;
  align-items: stretch;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.button-group button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  font-size: 15px;
}

.button-group button + button, .button-group output + button { border-left: 1px solid var(--line); }
.button-group button:hover { background: var(--green-tint); }
.button-group svg { width: 18px; height: 18px; }

.button-group output {
  display: grid;
  place-items: center;
  min-width: 66px;
  border-left: 1px solid var(--line);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.legend {
  position: absolute;
  right: 236px; bottom: 34px;
  z-index: 5;
  display: flex;
  gap: 26px;
  color: var(--ink-soft);
  font-size: 13px;
  pointer-events: none;
}

.legend span { display: flex; align-items: center; gap: 10px; }
.legend i { display: block; width: 40px; border-top: 1.5px solid var(--line-strong); }
.legend i.dashed { border-top-style: dashed; }

.minimap {
  position: absolute;
  right: 22px; bottom: 18px;
  z-index: 5;
  width: 184px; height: 104px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.minimap svg { display: block; width: 100%; height: 100%; }
.minimap rect.mini-card { fill: #c3cbc4; }
.minimap rect.mini-card.selected { fill: var(--green); }
.minimap rect.viewport { fill: rgba(31, 74, 57, 0.08); stroke: var(--green); stroke-width: 2; vector-effect: non-scaling-stroke; }

.canvas-footer {
  padding: 8px 28px 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Detail panel ---------- */

.panel {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
}

.sheet-handle { display: none; }

.panel-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 36px 30px 24px;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 18px;
}

.panel-head .avatar {
  width: 104px; height: 104px;
  font-size: 40px;
  box-shadow: 0 0 0 6px var(--surface), 0 0 0 7px var(--line);
}

.panel-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.08;
}

.panel-head .years {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 19px;
}

.tabs {
  display: flex;
  gap: 4px;
  margin: 26px -10px 0;
  border-bottom: 1px solid var(--line);
}

.tabs button {
  position: relative;
  padding: 10px 12px 12px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 18px;
}

.tabs button[aria-selected="true"] { color: var(--green); font-weight: 600; }
.tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--green);
  border-radius: 2px 2px 0 0;
}

.facts { margin: 0; }

.fact {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.fact:last-child { border-bottom: 0; }
.fact dt { font-weight: 600; }
.fact dd { margin: 0; }
.fact .sub { color: var(--muted); }
.fact .unknown { color: var(--muted); font-style: italic; }

.person-link {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  font-size: 17px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

.person-link:hover { color: var(--green); text-decoration-color: currentColor; }
.person-list { display: grid; gap: 10px; }
.person-list .sub { display: block; font-size: 15px; }

.notes-block { padding-top: 18px; }
.notes-block h3 { margin: 0 0 6px; font-size: 16px; }
.notes-block p { margin: 0; color: var(--ink-soft); }
.notes-block p::first-letter { text-transform: uppercase; }

.panel-actions { padding: 18px 30px 28px; }

.primary-button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 60px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-family: var(--serif);
  font-size: 22px;
  box-shadow: var(--shadow);
}

.primary-button:hover { background: var(--green-hover); }
.primary-button svg { width: 28px; height: 28px; flex-shrink: 0; }
.primary-button .chev { width: 20px; height: 20px; margin-left: auto; }

/* ---------- About page ---------- */

.about {
  min-height: calc(100vh - var(--header-h));
  padding: 56px 24px 80px;
}

.about[hidden] { display: none; }

.about article {
  max-width: 720px;
  margin: 0 auto;
}

.about h1 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 54px);
  font-weight: 600;
  line-height: 1.05;
}

.about .lede {
  margin: 0 0 36px;
  font-family: var(--serif);
  font-size: 23px;
  color: var(--muted);
}

.about h2 {
  margin: 40px 0 10px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
}

.about p, .about li { color: var(--ink-soft); font-size: 17px; line-height: 1.65; }
.about ul { padding-left: 22px; }

.about .back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  text-decoration: none;
}

.noscript {
  max-width: 560px;
  margin: 80px auto;
  padding: 0 24px;
  font-size: 18px;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 1180px) {
  .tree-page { --panel-w: 340px; }
  .legend { display: none; }
  .stat-chip { display: none; }
  .panel-scroll { padding: 28px 24px 20px; }
  .panel-actions { padding: 14px 24px 22px; }
  .panel-head .avatar { width: 84px; height: 84px; font-size: 32px; }
  .panel-head h2 { font-size: 28px; }
}

@media (max-width: 860px) {
  .app { display: block; position: relative; }
  .main { height: 100%; }

  .tree-hero { padding: 16px 16px 14px; }
  .tree-hero h1 { font-size: 30px; }
  .tree-hero .tagline { font-size: 18px; margin-top: 2px; }
  .family-switch { margin-top: 12px; }
  .family-switch > span, .family-switch .wide { display: none; }
  .family-switch button { flex: 1; min-width: 0; height: 36px; padding: 0 6px; font-size: 14px; }
  .controls { flex-wrap: wrap; gap: 10px; margin-top: 10px; }
  .search { flex: 1 1 100%; max-width: none; margin-left: 0; order: -1; }
  .search input, .select select { height: 44px; }
  .select { flex: 1; }
  .select select { width: 100%; }

  .canvas-footer { display: none; }
  .minimap { display: none; }
  .zoom-bar { left: 12px; bottom: 112px; }
  .button-group { height: 40px; }
  .button-group output { min-width: 54px; }
  .fit-label { display: none; }

  /* Detail panel becomes a bottom sheet. */
  .panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 78vh;
    max-height: 78dvh;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(29, 37, 33, 0.14);
    transform: translateY(calc(100% - 104px));
    transition: transform 280ms cubic-bezier(.2, .7, .2, 1);
  }

  .panel.open { transform: translateY(0); }

  .sheet-handle {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px 0 6px;
    border: 0;
    background: none;
    cursor: grab;
    touch-action: none;
  }

  /* The bar and the name area are dragged, not scrolled. */
  .panel-head { touch-action: none; cursor: grab; }
  .panel-scroll { overscroll-behavior: contain; }

  .sheet-handle::before {
    content: "";
    width: 44px; height: 5px;
    border-radius: 3px;
    background: #cfd3cd;
  }

  .panel-scroll { padding: 8px 16px 12px; }
  .panel-head { gap: 14px; min-height: 64px; }
  .panel-head .avatar { width: 56px; height: 56px; font-size: 22px; box-shadow: none; }
  .panel-head h2 { font-size: 23px; }
  .panel-head .years { margin-top: 2px; font-size: 16px; }
  .tabs { margin-top: 14px; }
  .fact { grid-template-columns: 96px minmax(0, 1fr); padding: 14px 0; }
  .panel-actions { padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); }
  .primary-button { height: 52px; font-size: 20px; }

  .about { padding: 36px 16px 64px; }
}

@media (max-width: 800px) {
  /* The site header is shorter here, and its menu must open above the tree. */
  .tree-page { --header-h: 65px; }
  .header { z-index: 40; }
}

@media (prefers-reduced-motion: reduce) {
  .stage.animate, .panel { transition: none; }
}