:root{
  --bg:#f6f4ef; --card:#fff; --ink:#24313a; --muted:#6f7b83;
  --line:#d7ddd9; --accent:#245d6c; --accent2:#5b8b7b;
  --ok:#2f7a53; --strong:#3b6d8c; --uncertain:#9a6a24; --unknown:#8a8f93;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.topbar{position:sticky;top:0;z-index:5;background:#173f4a;color:white;padding:18px 24px;display:flex;gap:24px;align-items:center;justify-content:space-between;box-shadow:0 2px 12px #0002}
.topbar h1{margin:0;font-size:1.35rem}.topbar p{margin:4px 0 0;color:#cce0e4}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}.toolbar button,.controls select,.generation-head select,#homeBtn{border:0;border-radius:9px;padding:9px 12px;background:white;color:#173f4a;cursor:pointer}
main{max-width:1200px;margin:auto;padding:22px}
.searchbar{position:relative}.searchbar input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);font-size:1rem;background:white}
#searchResults{position:absolute;left:0;right:0;top:52px;background:white;border-radius:10px;box-shadow:0 10px 30px #0002;max-height:330px;overflow:auto;z-index:4}
.search-item{padding:10px 14px;border-bottom:1px solid #eee;cursor:pointer}.search-item:hover{background:#f0f6f4}
.breadcrumb{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:18px 0;color:var(--muted)}
.breadcrumb a{color:var(--accent);text-decoration:none;font-weight:600}.breadcrumb span.sep{color:#aaa}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 4px 18px #0000000b}
.person-main{display:grid;grid-template-columns:1fr auto;gap:20px}.person-main h2{margin:0 0 8px}.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 20px;color:var(--muted)}
.badge{display:inline-block;border-radius:999px;padding:5px 9px;font-size:.8rem;font-weight:700}
.badge.bevestigd{background:#dff2e7;color:var(--ok)}.badge.sterk{background:#e0edf5;color:var(--strong)}.badge.onzeker{background:#f4ead6;color:var(--uncertain)}.badge.onbekend{background:#eee;color:#686d70}
.controls{margin:16px 0;display:flex;justify-content:flex-end}
.tree{overflow:auto;padding-bottom:12px}
.level{display:grid;grid-template-columns:repeat(var(--cols),minmax(220px,1fr));gap:12px;margin:12px 0}
.node{background:white;border:1px solid var(--line);border-left:5px solid var(--accent2);border-radius:12px;padding:12px;cursor:pointer;min-height:105px}.node:hover{transform:translateY(-1px);box-shadow:0 5px 20px #0001}.node.unknown{opacity:.7;border-left-color:#999}.node .nr{font-size:.78rem;color:var(--muted)}.node h3{font-size:.98rem;margin:5px 0}.node p{font-size:.85rem;margin:3px 0;color:var(--muted)}
.hidden{display:none}
.generation-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.summary{margin:12px 0;padding:12px 14px;background:#e9f1ef;border-radius:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:12px}
.track{background:white;padding:16px;border:1px solid var(--line);border-radius:14px;margin:12px 0}.track h3{margin-top:0}.track li{margin:6px 0}
footer{padding:30px;text-align:center;color:var(--muted)}
@media(max-width:700px){.topbar{align-items:flex-start;flex-direction:column}.person-main{grid-template-columns:1fr}.level{grid-template-columns:1fr!important}}


/* v0.3 — interactieve voorouderwaaier */
.fan-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow:0 4px 18px #0000000b;
  margin-bottom:18px;
}
.fan-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.fan-head h2{margin:0 0 4px}
.fan-head p{margin:0;color:var(--muted)}
.fan-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.fan-controls select,.fan-controls button{
  border:1px solid var(--line);background:white;color:var(--ink);
  border-radius:9px;padding:8px 10px;cursor:pointer
}
.fan-wrap{position:relative;overflow:auto;margin-top:10px}
#fanChart{display:block;width:100%;min-width:760px;height:auto;max-height:580px;overflow:visible}
.fan-segment{stroke:#fff;stroke-width:1.25;cursor:pointer;transition:opacity .12s,stroke-width .12s,filter .12s}
.fan-segment:hover{filter:brightness(.96);stroke:#173f4a;stroke-width:2}
.fan-segment.paternal{fill:#b9d8df}
.fan-segment.maternal{fill:#e5c5b8}
.fan-segment.unknown{fill:#e5e7e7}
.fan-segment.uncertain{fill:#e9d9b8}
.fan-segment.strong.paternal{fill:#a9ccd5}
.fan-segment.strong.maternal{fill:#dbb9aa}
.fan-segment.confirmed.paternal{fill:#8fc0cb}
.fan-segment.confirmed.maternal{fill:#d2a791}
.fan-segment.path{stroke:#173f4a;stroke-width:4;filter:drop-shadow(0 0 2px #fff)}
.fan-segment.current{stroke:#b66b24;stroke-width:5;filter:drop-shadow(0 0 3px #fff)}
.fan-center{fill:#173f4a;stroke:white;stroke-width:3;cursor:pointer}
.fan-center.current{stroke:#b66b24;stroke-width:5}
.fan-label{pointer-events:none;text-anchor:middle;fill:#24313a;font-size:11px;font-weight:650}
.fan-label.small{font-size:9px;font-weight:600}
.fan-ring-label{fill:#7a858b;font-size:10px;text-anchor:middle}
.fan-tooltip{
  position:fixed;z-index:20;pointer-events:none;max-width:310px;
  background:#173f4a;color:white;border-radius:10px;padding:10px 12px;
  box-shadow:0 10px 30px #0003;font-size:.9rem;line-height:1.35
}
.fan-tooltip strong{display:block;margin-bottom:3px}
.fan-tooltip .muted{color:#cbdde1}
.fan-legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.88rem;margin-top:8px}
.legend-swatch{display:inline-block;width:15px;height:15px;border-radius:4px;vertical-align:-3px;margin-right:5px;border:1px solid #fff}
.legend-swatch.paternal{background:#8fc0cb}.legend-swatch.maternal{background:#d2a791}.legend-swatch.unknown{background:#e5e7e7;border-color:#ccc}
.legend-line{display:inline-block;width:20px;border-top:4px solid #173f4a;vertical-align:3px;margin-right:5px}
@media(max-width:700px){
  .fan-head{flex-direction:column}
  #fanChart{min-width:680px}
}


/* v0.5 — diepe voorouderlijn */
.deep-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:18px;box-shadow:0 4px 18px #0000000b}
.deep-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.deep-head h2{margin:0 0 4px}.deep-head p{margin:0;color:var(--muted)}
.deep-controls{display:flex;gap:8px;flex-wrap:wrap}
.deep-controls button{border:1px solid var(--line);background:white;color:var(--ink);border-radius:9px;padding:8px 10px;cursor:pointer}
.deep-line{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:16px 2px 4px}
.deep-node{min-width:150px;max-width:190px;border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff;cursor:pointer}
.deep-node:hover{border-color:#173f4a}.deep-node.active{outline:3px solid #b66b24}
.deep-node .gen{font-size:.75rem;color:var(--muted)}.deep-node strong{display:block;margin:3px 0}
.deep-arrow{font-size:1.3rem;color:var(--muted);flex:0 0 auto}
@media(max-width:700px){.deep-head{flex-direction:column}}


/* v0.7 */
.fan-continuation{
  fill:var(--accent);stroke:#fff;stroke-width:1.2;cursor:pointer;opacity:.92
}
.fan-continuation:hover{opacity:1;stroke:#173f4a;stroke-width:2}
.dossier h3{margin:0 0 8px;font-size:1rem}
.family-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.family-grid section,.family-detail section,.notes,.events{
  border-top:1px solid var(--line);padding-top:12px
}
.family-detail{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.family-chip{display:inline-block;margin:0 7px 7px 0;padding:6px 9px;background:#eef4f2;border-radius:999px}
.family-chip a{text-decoration:none;color:var(--accent);font-weight:600}
.chip-wrap{line-height:1.8}
.events ul{margin:8px 0 0;padding-left:20px}.events li{margin:7px 0}
.notes p{margin:5px 0 0}
.places-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end}
.places-head h2{margin-bottom:4px}.places-head p{margin:0;color:var(--muted)}
.places-head select{border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:white}
.places-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.place-card{background:white;border:1px solid var(--line);border-radius:14px;padding:14px}
.place-title{display:flex;justify-content:space-between;gap:12px;align-items:center}
.place-title span{color:var(--muted);font-size:.88rem}
.place-bar{height:8px;background:#edf0ef;border-radius:999px;margin:9px 0 10px;overflow:hidden}
.place-bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.place-people{font-size:.88rem;line-height:1.55}.place-people a{color:var(--accent);text-decoration:none}
.muted{color:var(--muted)}
@media(max-width:900px){
  .family-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  .family-grid,.family-detail{grid-template-columns:1fr}
  .places-head{flex-direction:column;align-items:stretch}
}
/* v0.8 biografische laag */
.story{margin-top:18px;padding:16px 18px;border-radius:14px;background:rgba(112,64,35,.06);border:1px solid rgba(112,64,35,.18)}.story h3{margin-top:0}.event-source{margin-top:4px;font-size:.82rem;opacity:.68}

/* v0.9 — Bronnen & bewijs */
.source-summary{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.source-kpi{background:#f6f1e7;border:1px solid #ded3c2;border-radius:12px;padding:10px 14px;min-width:130px}.source-kpi strong{display:block;font-size:1.25rem}.source-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0 18px}.source-tools input,.source-tools select{padding:9px 10px;border:1px solid #cfc5b5;border-radius:8px;background:white}.source-list{display:grid;gap:12px}.source-card{background:white;border:1px solid #ddd3c4;border-radius:12px;padding:14px 16px;box-shadow:0 2px 8px rgba(0,0,0,.04)}.source-card h3{margin:0 0 5px}.source-meta{font-size:.88rem;color:#6c6258;margin:5px 0}.source-actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}.source-link{display:inline-block;padding:7px 10px;border-radius:8px;background:#365b4b;color:white;text-decoration:none;font-weight:600}.source-link:hover{background:#28473a}.source-person-link{font-size:.9rem}.evidence-box{margin-top:16px;padding-top:14px;border-top:1px solid #e3dacd}.evidence-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.evidence-list{margin-top:10px;display:grid;gap:8px}.evidence-item{background:#f8f5ef;border-radius:9px;padding:9px 11px}.research-note{border-left:4px solid #b88939;padding:10px 12px;background:#fbf6ea;border-radius:6px;margin:8px 0}.badge.geparkeerd,.badge.open{background:#eee6d8;color:#6c5331}.badge.onzeker{background:#fff0d0;color:#7b5413}.badge.sterk{background:#e7f0e8;color:#355e3b}.badge.bevestigd{background:#dfeee6;color:#24513a}

/* v0.9.5: naamvarianten, takgebonden bijnamen, records en foto's */
.identity-extra,.records,.photos{margin-top:18px;padding:14px 16px;border:1px solid var(--line,#d9dee7);border-radius:12px;background:rgba(127,127,127,.04)}
.identity-extra h3,.records h3,.photos h3{margin-top:0}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.photo-grid figure{margin:0}.photo-grid img{width:100%;height:180px;object-fit:cover;border-radius:10px}.photo-grid figcaption{font-size:.86rem;margin-top:5px}

/* v1.0.0 — volledige cirkel, leesbare familiehiërarchie en records */
.fan-wrap{max-height:78vh;border:1px solid var(--line);border-radius:14px;background:#fbfcfb;padding:8px;overscroll-behavior:contain}
#fanChart{display:block;max-height:none;max-width:none;min-width:920px;height:auto;margin:auto}
.fan-label.tiny{font-size:7px}.fan-label.center{font-size:12px}.fan-label.small.center{font-size:9px}
.family-overview{margin-top:20px;padding:16px;background:#f6f9f8;border:1px solid var(--line);border-radius:16px}.family-overview>h3{margin-bottom:14px}
.pedigree.parents-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.pedigree-node,.partner-box{background:white;border:1px solid var(--line);border-radius:12px;padding:11px 13px}.pedigree-node span,.partner-box span{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}.pedigree-node strong,.partner-box a{font-size:1rem}.pedigree-node small,.partner-box small{display:block;color:var(--muted);margin-top:4px}.pedigree-node.focus{border:2px solid var(--accent);background:#fff}.pedigree-arrow{text-align:center;color:var(--muted);font-weight:700;padding:8px 0}.focus-family{display:grid;grid-template-columns:minmax(260px,1.2fr) minmax(230px,.8fr);gap:14px;align-items:stretch}.partners-column{display:grid;gap:8px}.partners-column>b{font-size:.8rem;color:var(--muted);text-transform:uppercase}.children-row{display:flex;flex-wrap:wrap;justify-content:center}.family-chip.line-child{background:#dceee9;border:2px solid var(--accent)}.family-chip em{display:block;font-size:.7rem;font-style:normal;color:var(--accent);font-weight:700}.line-context{text-align:center;margin-top:10px;color:var(--muted);font-size:.9rem}.records-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.record-card{background:white;border:1px solid var(--line);border-radius:15px;padding:16px;box-shadow:0 4px 14px #00000008}.record-card h3{margin:3px 0 8px}.record-kicker{font-size:.75rem;color:var(--muted);font-weight:700}.record-holder{font-weight:700;margin-bottom:8px}.record-note{margin-top:10px;font-size:.88rem;color:var(--muted)}
@media(max-width:700px){.focus-family{grid-template-columns:1fr}.fan-wrap{max-height:70vh}}

/* v1.0.1 — vaste cirkelomvang + fotoarchitectuur */
#fanChart{width:100%;max-width:1050px;min-width:0!important;aspect-ratio:1/1;height:auto;margin:auto}
.fan-wrap{overflow:auto}
.person-main{grid-template-columns:minmax(0,1fr) 118px auto;align-items:start}
.person-photo-slot{width:110px;height:110px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#f4f1ea;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:4px}
.person-photo-slot img{width:100%;height:100%;object-fit:cover}.person-photo-slot>span:not(.camera-mark){display:none}.camera-mark{font-size:1.7rem;opacity:.5}.person-photo-slot small{font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.photo-empty{min-height:105px;border:1px dashed #cfc5b5;border-radius:11px;background:#faf8f4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;color:var(--muted);gap:5px}.photo-empty strong{color:var(--text)}
@media(max-width:700px){.person-main{grid-template-columns:1fr auto}.person-photo-slot{grid-row:2;width:96px;height:96px}}

/* v1.0.3 — ancestor-circle viewport/readability patch */
.fan-label.center,.fan-label.small.center{fill:#fff!important}
.fan-wrap{
  overflow:hidden!important;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  max-height:none!important;
}
#fanChart{
  display:block;
  width:min(100%,1050px,calc(100vh - 245px))!important;
  max-width:1050px!important;
  min-width:0!important;
  height:auto!important;
  aspect-ratio:1/1;
  margin:0 auto!important;
}
@media(max-height:780px){
  #fanChart{width:min(100%,1050px,calc(100vh - 205px))!important}
}
@media(max-width:700px){
  .fan-wrap{overflow:auto!important}
  #fanChart{width:100%!important;min-width:680px!important}
}


/* v1.0.4 — rustige, volle-breedte vooroudercirkel */
.fan-wrap{
  overflow:hidden!important;
  display:block!important;
  width:100%;
  max-height:none!important;
  padding:8px;
  box-sizing:border-box;
}
#fanChart{
  display:block;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  aspect-ratio:1/1;
  margin:0!important;
}
@media(max-width:700px){
  .fan-wrap{overflow:auto!important;}
  #fanChart{width:100%!important;min-width:680px!important;}
}


/* v1.0.5 — pagina-scroll boven cirkel + vertrouwde vader/moederoriëntatie */
.fan-wrap{
  overscroll-behavior:auto!important;
  touch-action:pan-y;
}