/* Stamtræ — styles.css — udtrukket uændret fra den oprindelige stamtrae.html (v1.0) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:"Inter",system-ui,-apple-system,sans-serif;background:#f7f6f2}
body{display:flex;flex-direction:column}

/* ── TOP BAR ── */
#topbar{
  display:flex;flex-direction:column;
  background:#fafaf7;color:#1a1a1a;flex-shrink:0;
  border-bottom:1px solid #e5e5e0;
  position:relative;z-index:1000;isolation:isolate;
  font-family:"Inter",system-ui,-apple-system,sans-serif;
}
#topbar *{pointer-events:auto}
#bc{cursor:default}
#bc .bcl,#bc .bcc{position:relative;z-index:1;display:inline-block;padding:2px 0}
#topbar-row1{
  display:flex;align-items:center;
  padding:10px 16px 4px 16px;
}
#topbar-identity{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
#topbar-title{
  font-size:19px;font-weight:400;color:#1a1a1a;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;line-height:1.25;
}
#topbar-title .title-name{font-weight:600;}
#topbar-title .title-dates{color:#6b6b6b;font-size:16px;font-weight:400;}
#bc{
  font-size:12px;color:#6b6b6b;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis;min-width:0;line-height:1;margin-top:1px;
}
.bcs{color:#c0c0b8;margin:0 3px;}
.bcl{color:#6b6b6b;cursor:pointer;}
.bcl:hover{text-decoration:underline;color:#1a1a1a;}
.bcc{color:#1a1a1a;font-weight:500;cursor:pointer;}
.bcc:hover{text-decoration:underline;}
#topbar-row2{
  display:flex;align-items:center;padding:5px 12px 9px 12px;gap:8px;
  position:relative;
}
#btn-back{
  width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:8px;cursor:pointer;color:#4a4a4a;
  transition:background 150ms ease,color 150ms ease;padding:0;
}
#btn-back:hover:not(:disabled){background:#f0f0eb;color:#1a1a1a;}
#btn-back:disabled{opacity:.35;cursor:default;}
#sw{position:relative;flex:1;max-width:420px;margin:0 auto;}
#search-icon{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:#a0a09a;display:flex;align-items:center;line-height:0;
}
#search{
  width:100%;padding:8px 12px 8px 36px;border-radius:8px;
  border:1.5px solid #d8d8d2;background:#ffffff;color:#1a1a1a;
  font-size:14px;font-family:inherit;transition:border-color 150ms ease;outline:none;
}
#search:focus{border-color:#a0a09a;}
#search::placeholder{color:#a0a09a;}
#sres{
  position:absolute;top:calc(100% + 4px);left:0;width:100%;
  background:#ffffff;border:1px solid #e5e5e0;border-radius:8px;
  max-height:280px;overflow-y:auto;z-index:300;display:none;
  box-shadow:0 8px 24px rgba(0,0,0,.10);
}
.si{padding:9px 14px;cursor:pointer;border-bottom:1px solid #f0f0eb;}
.si:last-child{border-bottom:none;}
.si:hover{background:#fafaf7;}
.si .sn{color:#1a1a1a;font-weight:600;font-size:13px;}
.si .sy{color:#6b6b6b;font-size:11px;}
#topbar-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.tb-btn{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:8px;cursor:pointer;color:#4a4a4a;
  transition:background 150ms ease,color 150ms ease;padding:0;flex-shrink:0;
}
.tb-btn:hover{background:#f0f0eb;color:#1a1a1a;}
.tb-btn.active{background:#dbeafe;color:#2563eb;}
#sibtog{display:none;}
/* ── GENERATION SELECTOR ── */
#gen-selector{display:flex;align-items:center;gap:0;flex-shrink:0;}
.gen-btn{
  height:28px;padding:0 9px;border:1px solid #d0d0c8;background:transparent;
  color:#4a4a4a;font-size:13px;font-family:"Inter",system-ui,sans-serif;
  cursor:pointer;transition:background 150ms ease,color 150ms ease;
  line-height:1;
}
.gen-btn:first-child{border-radius:6px 0 0 6px;}
.gen-btn:last-child{border-radius:0 6px 6px 0;}
.gen-btn:not(:first-child){border-left:none;}
.gen-btn:hover:not(.gen-active){background:#f0f0eb;color:#1a1a1a;}
.gen-btn.gen-active{background:#dbeafe;color:#2563eb;border-color:#93c5fd;font-weight:600;}
/* ── HINTS TOGGLE ── */
#btn-hints.hints-off{background:#f0f0eb;color:#1a1a1a;}

/* ── COACHMARK ── */
@keyframes sibPulse{0%,100%{box-shadow:0 0 0 0 rgba(59,106,168,.35)}60%{box-shadow:0 0 0 4px rgba(59,106,168,0)}}
.tb-btn.coach-pulse{animation:sibPulse 1.6s ease-out infinite}
#coachmark{
  position:fixed;z-index:500;
  background:#f8f8f4;color:#2a2a26;
  border:1px solid #e8e8e2;border-radius:10px;
  padding:12px 14px;max-width:220px;
  box-shadow:0 4px 14px rgba(0,0,0,.09);
  font-size:13px;line-height:1.5;
  pointer-events:auto;font-family:"Inter",system-ui,sans-serif;
  opacity:0;transition:opacity .35s ease;
}
#coachmark.visible{opacity:1}
#coachmark-arrow{
  position:absolute;top:-8px;right:28px;
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid #e8e8e2;
}
#coachmark-arrow::after{
  content:'';position:absolute;top:2px;left:-7px;
  width:0;height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-bottom:7px solid #f8f8f4;
}
#coachmark p{margin:0 0 10px 0;}
#coachmark-dismiss{
  background:none;border:none;color:#3b6aa8;
  font-size:12px;font-weight:600;cursor:pointer;
  padding:0;font-family:inherit;
}
#coachmark-dismiss:hover{text-decoration:underline;}

/* ── CANVAS ── */
#canvas{flex:1;overflow:hidden;position:relative}
#svg{width:100%;height:100%;cursor:grab;display:block;background:transparent;overflow:hidden}
#svg:active{cursor:grabbing}

/* ── SVG ELEMENTS ── */
.pbox{cursor:pointer}
.pbox rect.boxrect{transition:filter .18s cubic-bezier(0.4,0,0.2,1),stroke .18s cubic-bezier(0.4,0,0.2,1),stroke-width .18s cubic-bezier(0.4,0,0.2,1)}
.pbox:hover rect.boxrect{filter:drop-shadow(0 3px 8px rgba(0,0,0,.14))}
.pfocus rect.boxrect{stroke-width:3!important;filter:drop-shadow(0 0 10px rgba(217,119,6,.55)) drop-shadow(0 2px 10px rgba(59,106,168,.35))!important}
@keyframes focusPulse{0%,100%{opacity:1}50%{opacity:.7}}
.pfocus-glow{animation:focusPulse 2s ease-in-out infinite;pointer-events:none}
.pphold rect.boxrect{stroke-dasharray:6 3}
.pname{font-weight:600;fill:#1a1a18;font-family:"Inter",system-ui,sans-serif}
.pyear{font-size:10px;fill:#7a7a72;font-family:"Inter",system-ui,sans-serif}
.byou{font-size:9px;fill:#b08540;font-weight:700;font-family:"Inter",system-ui,sans-serif}
.bhalf{font-size:9px;fill:#fff;font-weight:600;font-family:"Inter",system-ui,sans-serif}
.pstar{font-size:15px;fill:#c9a227;font-family:"Inter",system-ui,sans-serif;pointer-events:none}
.dm polygon{fill:#4a4a45;transition:fill .12s}
.dm.dmc{cursor:pointer}
.dm.dmc:hover polygon{fill:#3b6aa8}
.tl{stroke:#bdbdb8;stroke-width:1.25;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s cubic-bezier(0.4,0,0.2,1),stroke-width .18s cubic-bezier(0.4,0,0.2,1)}
.tl-hl{stroke:#3a3a36;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sb{stroke:#bdbdb8;stroke-width:1.25;fill:none;stroke-linecap:round}
.gl{font-size:10px;fill:#a8a8a0;font-family:"Inter",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.nav-hint{font-size:17px;fill:#4a4a45;font-family:"Inter",system-ui,sans-serif;cursor:pointer;text-anchor:middle;pointer-events:all}
.nav-hint-up{dominant-baseline:auto}
.nav-hint-dn{dominant-baseline:hanging}

/* ── TOOLTIP ── */
/* btn-share uses .tb-btn */
#share-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:#2a2a26;color:#f0ede6;border:1px solid #4a4a45;border-radius:8px;
  padding:10px 18px;font-size:13px;z-index:600;pointer-events:none;
  opacity:0;transition:opacity .3s ease;white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.22);font-family:"Inter",system-ui,sans-serif;
}
#share-toast.visible{opacity:1}
/* ── SHARE MODAL ── */
#share-modal{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:700;
  align-items:center;justify-content:center;
}
#share-modal.open{display:flex}
#share-modal-box{
  background:#f8f8f4;border:1px solid #e8e8e2;border-radius:12px;padding:24px 28px;
  max-width:420px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.12);position:relative;
  font-family:"Inter",system-ui,sans-serif;
}
#share-modal-box h3{color:#1a1a18;margin-bottom:16px;font-size:16px;font-weight:600;padding-right:28px}
#share-url-wrap{display:flex;gap:8px;align-items:center}
#share-url{
  flex:1;padding:8px 10px;border-radius:6px;border:1px solid #d8d8d2;
  background:#ffffff;color:#2a2a26;font-size:12px;font-family:monospace;
}
#share-copy-btn{
  background:#3b6aa8;border:1px solid #3b6aa8;color:#ffffff;padding:8px 14px;
  border-radius:6px;cursor:pointer;font-size:13px;white-space:nowrap;flex-shrink:0;
  font-family:"Inter",system-ui,sans-serif;font-weight:500;
}
#share-copy-btn:hover{background:#2f5890}
#share-copy-ok{color:#5a8a5e;font-size:13px;margin-top:8px;display:none}
#share-modal-close{
  position:absolute;top:12px;right:14px;background:none;border:none;
  color:#a8a8a0;cursor:pointer;font-size:18px;line-height:1;padding:4px 6px;
  border-radius:6px;transition:background .12s,color .12s;
}
#share-modal-close:hover{color:#1a1a18;background:#eeeee8}
#tt{
  position:fixed;background:#f8f8f4;color:#2a2a26;border:1px solid #e8e8e2;
  border-radius:8px;padding:12px 14px;font-size:13px;max-width:300px;
  pointer-events:none;display:none;z-index:500;line-height:1.5;
  box-shadow:0 4px 12px rgba(0,0,0,.08);font-family:"Inter",system-ui,sans-serif;
}
#tt h4{font-size:14px;color:#3b6aa8;margin-bottom:4px;font-weight:600}
.tr{color:#6a6a62;font-size:12px}
.tr b{color:#2a2a26}

/* ── INFO-PANEL (fokusperson, fast placeret th.) ── */
#infopanel{
  position:fixed;right:12px;width:300px;
  overflow-y:auto;background:#fafaf7;color:#2a2a26;
  border:1px solid #e5e5e0;border-radius:10px;padding:16px 16px 14px;
  z-index:600;box-shadow:0 6px 18px rgba(0,0,0,.09);
  font-family:"Inter",system-ui,sans-serif;font-size:13px;line-height:1.5;
  display:none;
}
#ip-close{
  position:absolute;top:8px;right:10px;border:none;background:none;cursor:pointer;
  font-size:20px;line-height:1;color:#8a8a80;padding:2px 6px;border-radius:6px;
}
#ip-close:hover{background:#eeeee8;color:#2a2a26}
#ip-photo{display:none;margin:-4px -4px 10px;position:relative}
#ip-photo img{width:100%;border-radius:8px;display:block}
.ip-photo-nav{
  position:absolute;top:0;bottom:0;width:32px;display:none;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:#fff;font-size:22px;line-height:1;
  opacity:0;transition:opacity .15s ease,background .15s ease;padding:0;
}
#ip-photo:hover .ip-photo-nav{opacity:1}
.ip-photo-nav:hover{background:rgba(0,0,0,.18)}
.ip-photo-prev{left:0;border-radius:8px 0 0 8px}
.ip-photo-next{right:0;border-radius:0 8px 8px 0}
.ip-photo-counter{
  position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;
  font-size:11px;padding:2px 7px;border-radius:10px;pointer-events:none;line-height:1.4;
}
.ip-photo-caption{
  margin-top:6px;font-size:11px;color:#8a8a80;font-style:italic;line-height:1.4;
}
@media (hover:none){
  .ip-photo-nav{opacity:1}
}
#ip-name{font-size:16px;font-weight:600;color:#1a1a1a;margin:0 18px 2px 0}
#ip-lineage{font-size:11px;color:#8a8a80;margin-bottom:8px}
#ip-lineage .ip-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:5px;vertical-align:-1px;
}
#ip-featured{
  display:none;font-size:12px;color:#8a6d1f;background:#fdf6e3;border:1px solid #eddfae;
  border-radius:6px;padding:6px 9px;margin-bottom:8px;line-height:1.5;
}
#ip-featured b{color:#7a5c14}
#ip-facts .ipr{color:#6a6a62;font-size:12px;margin-bottom:2px}
#ip-facts .ipr b{color:#2a2a26;font-weight:600}
#ip-marriages{margin-top:8px}
#ip-marriages .ipr{color:#6a6a62;font-size:12px;margin-bottom:2px}
#ip-marriages a{color:#3b6aa8;cursor:pointer;text-decoration:none}
#ip-marriages a:hover{text-decoration:underline}
#ip-note{
  margin-top:10px;padding-top:9px;border-top:1px solid #e8e8e2;
  font-size:12px;color:#6a6a62;white-space:pre-line;
}
#ip-note:empty{display:none}
#ip-kilder{
  margin-top:10px;padding-top:8px;border-top:1px dashed #e0e0d8;
  font-size:11px;color:#96968c;line-height:1.5;white-space:pre-line;display:none;
}
.ip-kilder-label{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#a8a8a0;
  margin-bottom:3px;font-weight:600;
}
#ip-open{
  position:fixed;right:12px;z-index:600;width:32px;height:32px;border-radius:50%;
  border:1px solid #e5e5e0;background:#fafaf7;color:#3b6aa8;cursor:pointer;
  font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:16px;
  box-shadow:0 3px 10px rgba(0,0,0,.10);display:none;align-items:center;justify-content:center;
}
#ip-open:hover{background:#f0f0ea}
@media (max-width:720px){
  #infopanel{width:calc(100vw - 24px);max-width:340px}
}

/* ── HELP MODAL ── */
#help-modal{
  display:none;position:fixed;inset:0;z-index:800;
  background:rgba(0,0,0,.6);align-items:center;justify-content:center;
}
#help-modal.open{display:flex}
#help-box{
  background:#f8f8f4;color:#2a2a26;border:1px solid #e8e8e2;
  border-radius:12px;padding:26px 30px;max-width:480px;width:90%;
  max-height:80vh;overflow-y:auto;position:relative;
  box-shadow:0 8px 32px rgba(0,0,0,.12);font-size:13px;line-height:1.65;
  font-family:"Inter",system-ui,sans-serif;
}
#help-box h3{color:#1a1a18;font-size:17px;font-weight:600;margin-bottom:16px}
#help-box h4{color:#6a6a62;font-size:11px;font-weight:600;margin:14px 0 5px;text-transform:uppercase;letter-spacing:.06em}
#help-box ul{padding-left:16px;margin:0}
#help-box li{color:#5a5a52;margin-bottom:4px}
#help-box li b{color:#1a1a18}
#help-close{
  position:absolute;top:12px;right:14px;background:none;border:none;
  color:#a8a8a0;font-size:18px;cursor:pointer;line-height:1;
  border-radius:6px;padding:4px 6px;transition:background .12s,color .12s;
}
#help-close:hover{color:#1a1a18;background:#eeeee8}
/* btn-help uses .tb-btn */
/* ── LEGEND PANEL ── */
#legend{
  position:fixed;bottom:16px;right:16px;z-index:400;
  background:#f8f8f4;border:1px solid #e8e8e2;border-radius:10px;
  padding:12px 14px;min-width:130px;max-width:160px;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.06);transition:all .2s ease;
  font-family:"Inter",system-ui,sans-serif;
}
#legend.collapsed #legend-items{display:none}
#legend-header{
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  font-size:11px;font-weight:600;color:#8a8a82;text-transform:uppercase;letter-spacing:.06em;
  user-select:none;
}
#legend-toggle{font-size:13px;color:#a8a8a0;transition:transform .2s}
#legend.collapsed #legend-toggle{transform:rotate(180deg)}
#legend-items{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.legend-row{display:flex;align-items:center;gap:7px;font-size:12px;color:#4a4a42;font-weight:400}
.legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}