/* Trabslægten · the family explorer. All styles stay inside this feature. */
#trab-tree-app {
  --tree-navy: #002c71; --tree-gold: #ad7a25; --tree-paper: #fbfaf5;
  position: relative; display: flex; flex-direction: column; isolation: isolate;
  height: min(900px, calc(100dvh - 125px)); min-height: 590px; width: 100%;
  background: var(--tree-paper); border: 1px solid #d8d4c6; border-radius: 15px;
  box-shadow: 0 12px 40px #2534470b; color: #233143; overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#trab-tree-app *, #trab-tree-app *::before, #trab-tree-app *::after { box-sizing: border-box; }
#trab-tree-app [hidden] { display: none !important; }
#trab-tree-app button, #trab-tree-app input, #trab-tree-app select { font: inherit; }
#trab-tree-app button, #trab-tree-app select, #trab-tree-app .tree-primary-link {
  min-height: 44px; border-radius: 7px; border: 1px solid #d6d8d9; background: #fffefa;
  color: #183b64; padding: 9px 13px; line-height: 1.3; cursor: pointer;
  box-shadow: none; font-size: 13px; font-weight: 600; text-decoration: none;
}
#trab-tree-app button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
#trab-tree-app button:hover, #trab-tree-app select:hover { background: #f0f3f5; border-color: #8b9fb7; }
#trab-tree-app button:focus-visible, #trab-tree-app a:focus-visible, #trab-tree-app input:focus-visible,
#trab-tree-app select:focus-visible, #tree-canvas:focus-visible, #tree-minimap:focus-visible {
  outline: 3px solid #bc8b37; outline-offset: 3px;
}
#trab-tree-app button svg { width: 18px; height: 18px; flex: 0 0 18px; }
#trab-tree-app .tree-topbar, #trab-tree-app .tree-toolbar {
  position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px; padding: 14px 18px;
  background: #fffefa; border-bottom: 1px solid #deded6;
}
#trab-tree-app .tree-topbar { gap: 12px 22px; }
#trab-tree-app .tree-heading { min-width: 0; }
#trab-tree-app .tree-heading h1, #trab-tree-app .tree-heading h2 {
  font: 400 clamp(21px, 2.4vw, 30px)/1.15 Georgia, 'Times New Roman', serif;
  margin: 0; letter-spacing: -.02em; color: #233143;
}
#trab-tree-app .tree-heading p { font-size: 12px; color: #76808a; margin: 5px 0 0; }
#trab-tree-app .tree-toolbar { padding-top: 10px; padding-bottom: 10px; gap: 9px; }
#trab-tree-app .tree-toolbar-main, #trab-tree-app .tree-actions, #trab-tree-app .tree-mode-switch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
#trab-tree-app .tree-mode-switch { gap: 3px; padding: 3px; border: 1px solid #d8dde2; border-radius: 10px; background: #f2f4f5; }
#trab-tree-app .tree-mode-switch button { border-color: transparent; background: transparent; min-height: 44px; padding: 8px 13px; }
#trab-tree-app [data-tree-mode].is-active { background: #fff; color: var(--tree-navy); box-shadow: 0 2px 5px #13243c12; border-color: #d4dbe3; }
#trab-tree-app [data-tree-action=all], #trab-tree-app .tree-primary-link {
  color: #fff; background: var(--tree-navy); border-color: var(--tree-navy);
}
#trab-tree-app [data-tree-action=all]:hover, #trab-tree-app .tree-primary-link:hover { background: #154b89; color: #fff; }
#trab-tree-app .tree-primary-link { display: inline-flex; align-items: center; justify-content: center; }
#trab-tree-app .tree-searchbox, #trab-tree-app .tree-search-wrap { position: relative; flex: 1 1 260px; max-width: 360px; min-width: 0; }
#trab-tree-app .tree-searchbox > label, #trab-tree-app .tree-search-wrap > label { display: block; font-size: 11px; margin: 0 0 4px; color: #617283; }
#tree-search { width: 100%; height: 44px; padding: 10px 14px; border: 1px solid #bdc8d3; border-radius: 8px; color: #24384d; background: #fff; box-shadow: none; }
#tree-search::placeholder { color: #7a8691; }
#tree-results {
  position: absolute; z-index: 35; top: calc(100% + 6px); left: 0; right: 0; max-height: min(390px, 55dvh);
  overflow: auto; border: 1px solid #c9d1da; border-radius: 10px; padding: 5px; margin: 0;
  background: #fffefa; box-shadow: 0 14px 32px #0f294d24;
}
#tree-results button { display: flex; justify-content: flex-start; width: 100%; text-align: left; border-color: transparent; background: transparent; padding: 9px 8px; gap: 10px; }
#tree-results button:hover, #tree-results button[aria-selected=true] { background: #edf3fa; border-color: #c3d3e5; }
#tree-results button strong, #tree-results button small { display: block; }
#tree-results button strong { font-size: 13px; font-weight: 600; color: #233143; }
#tree-results button small { margin-top: 3px; font-size: 11px; font-weight: 400; color: #687785; }
#trab-tree-app .tree-result-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; }
#trab-tree-app .tree-no-result { font-size: 13px; color: #687785; padding: 12px; margin: 0; }
#trab-tree-app .tree-generation-label { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 0; color: #647383; }
#tree-generations { padding-right: 30px; }
#tree-generations:disabled { color: #7e8994; background: #f5f5f0; cursor: default; }
#trab-tree-app .tree-workspace, #trab-tree-app .tree-stage { position: relative; flex: 1 1 auto; min-height: 300px; overflow: hidden; }
#trab-tree-app .tree-viewport { position: absolute; inset: 0; overflow: hidden; background: #fbfaf5; }
#tree-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#tree-canvas.is-dragging { cursor: grabbing !important; }
#trab-tree-app .tree-legend {
  position: absolute; top: 14px; left: 16px; z-index: 2; display: flex; flex-wrap: wrap; gap: 12px;
  padding: 7px 10px; border: 1px solid #dedfd5; border-radius: 20px; color: #536577;
  font-size: 11px; line-height: 1.3; background: #fffef8eb; pointer-events: none;
}
#trab-tree-app .tree-legend span { display: inline-flex; align-items: center; gap: 6px; }
#trab-tree-app .tree-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
#trab-tree-app .tree-sex-M { background: #c4dcf4; color: #244766; }
#trab-tree-app .tree-sex-F { background: #efc6d6; color: #713e53; }
#trab-tree-app .tree-sex-U { background: #ddd6c7; color: #625d52; }
#trab-tree-app .tree-zoom-controls {
  position: absolute; z-index: 3; bottom: 17px; right: 17px; display: flex; align-items: center; gap: 1px;
  padding: 3px; border: 1px solid #cbd2d7; border-radius: 10px; background: #fffef9f5; box-shadow: 0 4px 15px #152b3e0d;
}
#trab-tree-app .tree-zoom-controls button { min-width: 42px; padding: 6px 10px; border-color: transparent; background: transparent; font-size: 20px; }
#tree-zoom { min-width: 49px; font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; color: #536577; }
#tree-minimap {
  position: absolute; z-index: 3; bottom: 18px; left: 17px; width: 166px; height: 96px;
  border: 1px solid #c5cdd3; border-radius: 7px; background: #fffef9f5; box-shadow: 0 4px 15px #152b3e0d; cursor: crosshair;
}
#trab-tree-app .tree-mini-caption { position: absolute; bottom: 119px; left: 19px; color: #7b858d; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
#trab-tree-app .tree-bottom, #trab-tree-app .tree-statusbar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 20px;
  padding: 9px 18px; border-top: 1px solid #deded6; background: #fffefa; font-size: 11px; color: #6d7c89;
}
#tree-status { color: #3e566e; font-size: 11px; line-height: 1.45; }
#trab-tree-app .tree-help { margin: 0; font-size: 11px; color: #7a858c; }
#tree-loading {
  position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 13px; background: #fbfaf5f7;
  padding: 25px; text-align: center;
}
#tree-loading p { max-width: 430px; font-size: 14px; line-height: 1.65; color: #536577; margin: 0; }
#trab-tree-app .tree-loading-mark { display: grid; place-items: center; border: 1px solid #b9c5d2; border-radius: 10px 10px 22px 22px; width: 46px; height: 54px; color: #002c71; font: 33px Georgia, serif; }
#tree-person-panel {
  position: absolute; z-index: 8; top: 12px; right: 12px; bottom: 12px; width: 306px; max-width: calc(100% - 24px);
  overflow: auto; overscroll-behavior: contain; padding: 25px 22px; border: 1px solid #c8d1da; border-radius: 12px;
  background: #fffefbf9; box-shadow: 0 12px 35px #0c284625; outline-offset: -4px;
}
#tree-person-panel > [data-tree-action=close-panel] { position: absolute; top: 7px; right: 7px; padding: 6px; min-width: 44px; min-height: 44px; font-size: 21px; border-color: transparent; background: transparent; }
#trab-tree-app .tree-panel-avatar { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; font: 23px Georgia, serif; border: 1px solid #ffffffbf; }
#tree-person-name { font: 400 27px/1.17 Georgia, 'Times New Roman', serif; color: #233143; letter-spacing: -.02em; margin: 0 18px 9px 0; overflow-wrap: anywhere; }
#trab-tree-app .tree-panel-dates { font-size: 12px; color: #697b8c; margin: 0 0 18px; line-height: 1.6; }
#tree-panel-content dl { display: block; margin: 15px 0; padding: 12px 0; border-top: 1px solid #e2e3dc; border-bottom: 1px solid #e2e3dc; }
#tree-panel-content dt { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #86909a; margin: 0 0 3px; }
#tree-panel-content dd { font-size: 12px; line-height: 1.5; margin: 0 0 12px; color: #4a5f72; }
#tree-panel-content dd:last-child { margin-bottom: 0; }
#trab-tree-app .tree-panel-actions { display: flex; flex-direction: column; gap: 7px; }
#trab-tree-app .tree-panel-actions button, #trab-tree-app .tree-panel-actions a { justify-content: flex-start; text-align: left; font-size: 12px; padding: 10px 11px; }
#trab-tree-app .tree-panel-relatives { margin: 23px 0 0; }
#trab-tree-app .tree-panel-relatives h3 { font: 600 11px system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #798898; margin: 0 0 8px; }
#trab-tree-app .tree-panel-relatives .tree-relative { display: flex; justify-content: flex-start; text-align: left; width: 100%; font-size: 12px; margin: 5px 0; padding: 9px 11px; border: 1px solid #d6dce1; }
#trab-tree-app .tree-panel-relatives .tree-sex-M { background: #edf4fc; }
#trab-tree-app .tree-panel-relatives .tree-sex-F { background: #fdf0f5; }
#trab-tree-app .tree-panel-relatives .tree-sex-U { background: #f5f2eb; }
#trab-tree-app .tree-panel-note { font-size: 10px; color: #8b9399; line-height: 1.6; border-top: 1px solid #e2e3dc; padding-top: 15px; margin: 22px 0 0; }
#trab-tree-app:fullscreen, #trab-tree-app.tree-fullscreen {
  position: fixed; inset: 0; width: 100%; height: 100dvh; min-height: 0; max-height: none;
  z-index: 999999; border: none; border-radius: 0; padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom); background: #fffefa;
}
html.tree-fullscreen-active { overflow: hidden; }
@media (max-width: 1000px) {
  #trab-tree-app { height: max(650px, calc(100dvh - 140px)); }
  #trab-tree-app .tree-toolbar-main, #trab-tree-app .tree-actions { gap: 5px; }
  #trab-tree-app .tree-toolbar button { font-size: 12px; padding: 8px 10px; }
  #trab-tree-app .tree-help { display: none; }
}
@media (max-width: 650px) {
  #trab-tree-app { height: max(690px, calc(100dvh - 120px)); min-height: 600px; border-radius: 10px; }
  #trab-tree-app .tree-topbar { padding: 13px 11px 10px; gap: 11px; }
  #trab-tree-app .tree-heading { flex: 1 1 100%; }
  #trab-tree-app .tree-heading p { font-size: 11px; }
  #trab-tree-app .tree-searchbox, #trab-tree-app .tree-search-wrap { max-width: none; flex: 1 1 100%; }
  #trab-tree-app .tree-toolbar { padding: 8px; gap: 7px; }
  #trab-tree-app .tree-toolbar-main { width: 100%; justify-content: space-between; gap: 5px; }
  #trab-tree-app .tree-actions { gap: 5px; }
  #trab-tree-app .tree-mode-switch { gap: 1px; padding: 2px; }
  #trab-tree-app .tree-mode-switch button { padding: 7px 9px; font-size: 11px; min-height: 44px; }
  #trab-tree-app .tree-generation-label { gap: 4px; font-size: 10px; }
  #tree-generations { padding: 6px 22px 6px 6px; font-size: 11px; max-width: 87px; }
  #trab-tree-app .tree-actions button { font-size: 11px; padding: 8px 9px; }
  #trab-tree-app .tree-legend { left: 9px; top: 9px; gap: 9px; font-size: 10px; padding: 6px 8px; }
  #trab-tree-app .tree-zoom-controls { bottom: 10px; right: 9px; }
  #trab-tree-app .tree-zoom-controls button { min-width: 39px; padding: 5px 8px; }
  #tree-minimap { left: 10px; bottom: 11px; width: 112px; height: 70px; }
  #trab-tree-app .tree-mini-caption { left: 12px; bottom: 85px; font-size: 8px; }
  #trab-tree-app .tree-bottom, #trab-tree-app .tree-statusbar { padding: 8px 11px; }
  #tree-status { font-size: 10px; }
  #tree-person-panel { top: auto; right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; max-height: 78%; padding: 20px; }
  #tree-person-name { font-size: 25px; }
  #trab-tree-app:fullscreen, #trab-tree-app.tree-fullscreen { min-height: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  #trab-tree-app button, #trab-tree-app a { transition: background-color .15s, border-color .15s; }
}
@media print {
  #trab-tree-app .tree-toolbar, #trab-tree-app .tree-topbar, #tree-person-panel, #tree-minimap,
  #trab-tree-app .tree-zoom-controls, #trab-tree-app .tree-mini-caption { display: none !important; }
  #trab-tree-app { height: 650px; min-height: 650px; box-shadow: none; border-color: #ccc; }
}
/* Entry to the large family explorer. */
.tree-main { padding-top:24px; padding-bottom:32px; }
.tree-entry { display:grid; grid-template-columns:1fr 1.2fr; gap:44px; align-items:center; padding:52px; background:#fffefa; border:1px solid #d9d4c7; border-top:3px solid #d6a64a; box-shadow:0 15px 45px #25344706; }
.tree-entry h2 { font-size:clamp(32px,4vw,56px); line-height:1.08; margin:19px 0 22px; }
.tree-entry p { color:#68717a; font-size:16px; line-height:1.8; margin-bottom:25px; }
.tree-entry .button { padding:17px 23px; }
.tree-entry-art { position:relative; display:block; border-radius:18px; background:#f8f6ef; overflow:hidden; padding:12px 0 35px; color:#002c71; }
.tree-entry-art svg { display:block; width:100%; height:auto; }
.tree-entry-open { display:block; font-size:13px; font-weight:600; text-align:center; padding-top:13px; }
.tree-entry-features { display:flex; flex-wrap:wrap; gap:9px; margin-top:23px; color:#6a747e; font-size:11px; }
.tree-entry-features span { border:1px solid #deded5; border-radius:20px; padding:7px 10px; }
.tree-entry-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 30px; padding:25px 0; color:#747b81; font-size:13px; }
.tree-entry-bottom p { max-width:580px; }
#trab-tree-app .tree-back { display:block; font-size:12px; color:#6d7c89; margin-bottom:5px; text-decoration:none; }
#trab-tree-app .tree-source-note { padding:8px 18px; line-height:1.5; margin:0; border-top:1px solid #e8e5dc; background:#fffefa; }
#trab-tree-app .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:800px) { .tree-entry { grid-template-columns:1fr; padding:30px; gap:30px; } .tree-entry-art { max-width:650px; } .tree-main { width:calc(100% - 24px); padding-top:14px; } }
@media(max-width:500px) { .tree-entry { padding:25px 20px; gap:20px; } .tree-entry h2 { font-size:35px; } .tree-entry p { font-size:15px; } .tree-entry-art { padding-bottom:20px; } #trab-tree-app .tree-topbar .tree-heading { flex:1 1 190px; } #trab-tree-app .tree-heading h1 { font-size:23px; } #trab-tree-app .tree-topbar > button span { display:none; } #trab-tree-app .tree-toolbar .tree-mode-switch { order:1; } #trab-tree-app .tree-toolbar .tree-generation-label { order:2; max-width:160px; } #trab-tree-app .tree-toolbar .tree-search-wrap { order:3; } }