: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}
}