/* ── reset & base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f0ede8; color: #222; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* ── header ──────────────────────────────────────────── */
.site-header { background: #2c3e50; color: #fff; padding: 0 16px; height: 48px; display: flex; align-items: center; flex-shrink: 0; }
.header-inner { display: flex; align-items: center; gap: 16px; width: 100%; }
.header-inner h1 { font-size: 1.1rem; font-weight: 600; white-space: nowrap; }
.nav-shortcuts { display: flex; gap: 5px; flex-shrink: 0; }
.shortcut-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  color: #c8d8e8;
  border-radius: 4px;
  padding: 3px 11px;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.shortcut-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
.shortcut-btn.active { background: rgba(255,255,255,0.28); color: #fff; border-color: rgba(255,255,255,0.5); font-weight: 600; }
.header-controls { position: relative; flex: 1; max-width: 360px; }
.header-whats-new,
.header-whats-new:visited {
  flex-shrink: 0;
  color: #c8d8e8;
  text-decoration: none;
  font-size: 0.8rem;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 4px;
  padding: 3px 11px;
  transition: background 0.12s, color 0.12s;
}
.header-whats-new:hover { background: rgba(255,255,255,0.15); color: #fff; }
.header-version { flex-shrink: 0; color: #8ea3b8; font-size: 0.75rem; white-space: nowrap; cursor: default; }

/* Deliberately loud relative to header-whats-new/header-version — this is
   an action item for an admin (a story is waiting on them), not passive
   navigation, so it needs to read as "something needs you" at a glance. */
.header-pending-review,
.header-pending-review:visited {
  flex-shrink: 0;
  background: #d9534f;
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 4px;
  padding: 4px 12px;
  animation: pending-review-pulse 2.2s ease-in-out infinite;
}
.header-pending-review:hover { background: #c9302c; animation-play-state: paused; }
@keyframes pending-review-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,83,79,0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(217,83,79,0); }
}
#search { width: 100%; padding: 5px 10px; border: 1px solid #555; border-radius: 4px; background: #3d5166; color: #fff; font-size: 0.875rem; }
#search::placeholder { color: #aaa; }
.search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ccc; border-radius: 4px; max-height: 240px; overflow-y: auto; z-index: 100; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.search-dropdown.open { display: block; }
.search-result-item { padding: 8px 12px; cursor: pointer; font-size: 0.875rem; border-bottom: 1px solid #eee; }
.search-result-item:hover { background: #eef4fb; }

/* ── toolbar ──────────────────────────────────────────── */
.tree-page { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.tree-toolbar { background: #fff; border-bottom: 1px solid #ddd; padding: 6px 12px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tree-toolbar button { padding: 4px 12px; border: 1px solid #bbb; border-radius: 4px; background: #f5f5f5; cursor: pointer; font-size: 0.875rem; }
.tree-toolbar button:hover { background: #e8e8e8; }
.toolbar-hint { font-size: 0.78rem; color: #888; margin-left: 8px; }

/* ── viewport & stage ────────────────────────────────── */
#tree-viewport { flex: 1; overflow: hidden; position: relative; cursor: grab; user-select: none; }
#tree-viewport.dragging { cursor: grabbing; }
#tree-stage { position: absolute; transform-origin: 0 0; }

/* ── node positioning layer ─────────────────────────── */
#tree-nodes { position: absolute; top: 0; left: 0; }

/* ── SVG connector layer ─────────────────────────────── */
#tree-svg { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }

/* ── person card ──────────────────────────────────────── */
.nodeWrapper {
  position: absolute;
  width: 88px;
  height: 144px;
}

.node {
  display: flex;
  flex-direction: column;
  width: 88px;
  height: 144px;
  border-radius: 6px;
  border: 2px solid #c8c8c8;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  text-align: left;
  padding: 0;
  font: inherit;
}
.node:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.2); border-color: #888; }
.node:focus { outline: none; box-shadow: 0 0 0 3px rgba(66,153,225,0.5); }

.node.nodeMale   { border-color: #5b8db8; background: #f0f6fb; }
.node.nodeFemale { border-color: #b87878; background: #fbf0f0; }
.node.nodeFocus  { border-color: #4a8a4a; border-width: 3px; background: #e8f4e8; }
.node.nodeAncestor { border-color: #7a9ab8; background: #eaf0f8; }

.avatarWrap {
  width: 88px;
  height: 72px;
  overflow: hidden;
  background: #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatarWrap img { width: 88px; height: 72px; object-fit: cover; display: block; }
.avatarWrap .avatar-icon { font-size: 2.5rem; color: #aaa; }

.nodeContent {
  flex: 1;
  padding: 4px 5px 3px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.vAlignContent { width: 100%; }

.nodeTitle {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nodeInfo {
  display: block;
  font-size: 0.67rem;
  color: #666;
  margin-top: 2px;
  white-space: nowrap;
}
.nodeStories {
  display: block;
  font-size: 0.72rem;
  color: #5a7a9a;
  margin-top: 2px;
  white-space: nowrap;
}

/* ── SVG connectors ──────────────────────────────────── */
.parentLine { stroke-width: 2; fill: none; }
.maleLine   { stroke: #5b8db8; }
.femaleLine { stroke: #b87878; }
.neutralLine { stroke: #999; }
.dropLine   { stroke: #888; stroke-width: 1.5; fill: none; }
.siblingBracket { stroke: #888; stroke-width: 1.5; fill: none; }
.coupleCircle { fill: #fff; stroke: #888; stroke-width: 1.5; }

/* ── detail panel ────────────────────────────────────── */
.detail-panel {
  position: fixed;
  right: 0; top: 48px; bottom: 0;
  width: 320px;
  background: #fff;
  border-left: 1px solid #ddd;
  box-shadow: -4px 0 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  z-index: 50;
  transition: transform 0.2s;
}
.detail-panel.hidden { transform: translateX(100%); }
.detail-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #eee; }
.detail-header h2 { font-size: 1rem; }
#detail-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: #666; }
#detail-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.detail-field { display: flex; gap: 8px; margin-bottom: 8px; font-size: 0.875rem; }
.detail-label { color: #666; min-width: 80px; flex-shrink: 0; }
.detail-value { color: #222; }