:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#173b38;background:#f6f3ee;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}header{height:64px;display:flex;align-items:center;gap:12px;padding:0 20px;background:#f6f3ee;border-bottom:1px solid #ddd8cc;position:relative;z-index:3}.wordmark{display:grid;place-items:center;background:#183f3b;color:#f8edcf;font:700 15px Georgia,serif;width:37px;height:37px;border-radius:11px}h1{font:500 clamp(17px,3vw,22px) Georgia,serif;letter-spacing:.01em;margin:0;flex:1}.logout{color:#48615b;font-size:12px;text-decoration:none}#viewport{height:calc(100dvh - 64px);width:100vw;overflow:hidden;touch-action:none;position:relative;background:radial-gradient(circle at 50% 45%,#faf8f4 0,#f1eee7 100%);cursor:grab}#viewport:active{cursor:grabbing}#canvas{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}#tree{padding:70px 80px 100px;min-width:max-content;text-align:center}.root{display:flex;align-items:center;justify-content:center;gap:14px}.card{appearance:none;border:1px solid #c8c6bd;background:#fffefa;color:#1d3834;box-shadow:0 3px 13px #15342b13;border-radius:10px;min-width:134px;max-width:170px;min-height:72px;padding:13px 15px;font:500 15px/1.3 Georgia,serif;cursor:pointer;white-space:normal;text-align:center}.card:hover,.card:focus-visible{border-color:#a6844b;outline:2px solid #cdb58355}.root .card{min-width:165px;min-height:83px;font-size:17px}.marriage{width:42px;height:1px;background:#a99572;position:relative}.marriage:after{content:'∞';position:absolute;top:-12px;left:13px;background:#f8f6f1;padding:0 2px;font:15px Georgia,serif;color:#9f8359}.branch{position:relative;padding-top:51px}.branch:before{content:'';position:absolute;top:0;left:50%;height:31px;border-left:1px solid #9d9d91}.toggle{position:absolute;top:21px;left:50%;transform:translateX(-50%);width:27px;height:27px;border-radius:50%;border:1px solid #b9b2a1;background:#fffefa;color:#31564e;font-size:20px;line-height:20px;z-index:1;cursor:pointer}.children{display:flex;gap:27px;justify-content:center;align-items:flex-start;padding-top:27px;position:relative}.children:before{content:'';position:absolute;top:0;left:calc(50% / 7);right:calc(50% / 7);border-top:1px solid #a7a59b}.child{width:145px;flex:0 0 145px;position:relative;padding-top:24px}.child:before{content:'';position:absolute;top:-27px;left:50%;height:51px;border-left:1px solid #a7a59b}.child .card{width:145px;min-width:0}.hint{font:12px/1.4 system-ui,sans-serif;color:#698079;margin:32px 0 0}.controls{position:fixed;right:18px;bottom:calc(19px + env(safe-area-inset-bottom));z-index:4;display:flex;gap:5px;padding:5px;background:#ffffffed;border:1px solid #dedbd1;border-radius:12px;box-shadow:0 7px 22px #143b341a}.controls button{border:0;background:none;min-width:36px;height:34px;color:#254a42;font-size:18px;border-radius:7px;cursor:pointer}.controls #zoom-reset{font-size:12px;min-width:46px}.controls button:hover{background:#edf0ea}dialog{border:0;border-radius:20px;width:min(420px,calc(100vw - 30px));max-height:calc(100dvh - 36px);box-shadow:0 30px 90px #142f2f66;padding:32px;background:#fffdfa;color:#1e3b37}dialog::backdrop{background:#0b242477;backdrop-filter:blur(3px)}.close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:27px;color:#46635c;cursor:pointer}.avatar{display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:#e5e9df;color:#59746b;font:27px Georgia,serif;margin-bottom:18px}.profile-name{font:26px Georgia,serif;margin:0 0 12px}.profile-sub{color:#6a786f;font-size:13px}.login{max-width:420px;margin:18vh auto;padding:30px;text-align:center}.login p{line-height:1.5;color:#526a64}.sign-in{display:inline-block;background:#183f3b;color:#fff;padding:13px 18px;border-radius:8px;text-decoration:none;margin-top:20px}@media(max-width:650px){header{height:58px;padding:0 13px;gap:9px}#viewport{height:calc(100dvh - 58px)}.logout{font-size:11px}.wordmark{width:32px;height:32px}.controls{right:11px;bottom:calc(11px + env(safe-area-inset-bottom))}}@media(max-height:420px){header{height:48px}#viewport{height:calc(100dvh - 48px)}#tree{padding-top:28px}dialog{padding:21px}}
.family-unit{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top}
.person-families{display:flex;flex-direction:column;align-items:center;gap:26px}
.child{width:auto;min-width:145px;flex:0 0 auto}
.children{width:max-content}
.children:before{left:calc(50% / var(--child-count, 7));right:calc(50% / var(--child-count, 7))}
.children:has(>.child:only-child):before{display:none}
.person-node{display:inline-flex;flex-direction:column;align-items:flex-start;min-width:145px}
.person-row,.partners{display:flex;align-items:center}
.person-node .card{width:145px;min-width:145px}
.person-toggle{position:relative;top:auto;left:auto;transform:none;margin:13px 0 0 59px}
.person-branches{display:flex;flex-direction:column;align-items:center;align-self:center}
.person-branches:empty{display:none}
.family-unit>.branch,.person-branches .branch{padding-top:31px}
#connectors{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none}
#connectors path{fill:none;stroke:#aaa79c;stroke-width:1.3;stroke-linecap:round}
#tree{position:relative;z-index:1}
.branch:before,.children:before,.child:before{display:none}
.card.former{border:2px dashed #8e9389}
.partners{flex-direction:row;align-items:center;gap:0}
.relationship{display:flex;align-items:center}
.relationship.former .marriage{background:linear-gradient(#a99572,#a99572) left center/50% 1px no-repeat}
.relationship.former .marriage:before{content:'';position:absolute;left:50%;right:0;top:0;height:1px;background:repeating-linear-gradient(to right,#a99572 0 3px,transparent 3px 6px)}
.relationship.former .marriage:after{display:none}
.relationship.unmarried .marriage:after{content:'♥';color:#a35d67;font:14px system-ui,sans-serif;top:-11px;left:14px}
[hidden]{display:none!important}
.card{width:104px;min-width:104px;max-width:104px;min-height:158px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;font-size:12px;line-height:1.2}
.card-photo{width:60px;height:80px;display:block;position:relative;overflow:hidden;border-radius:5px;background:#e8e4da;flex:none}
.card-photo-image{position:absolute;width:200%;height:200%;max-width:none;left:-50%;top:-50%;object-fit:cover}
.card-photo-image.is-thumbnail{width:100%;height:100%;left:0;top:0}
.card-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;width:100%;max-height:3.6em;overflow:hidden;text-wrap:balance;overflow-wrap:break-word}
.root .card,.person-node .card,.child .card{width:104px;min-width:104px;max-width:104px;min-height:158px}
.root .card{font-size:12.5px}
.person-node,.child{min-width:104px}
.person-toggle{margin-left:38.5px}
.profile-photo{display:block;width:180px;height:240px;max-height:35dvh;object-fit:contain;border-radius:12px;margin-bottom:18px;background:#f0ede7}
.photo-upload{display:grid;gap:9px;margin-top:18px;padding-top:14px;border-top:1px solid #e2ded5;font:13px system-ui,sans-serif}.photo-upload label{display:grid;gap:7px}.photo-upload input{max-width:100%}.photo-upload button{justify-self:start;border:0;border-radius:7px;background:#183f3b;color:white;padding:9px 12px;cursor:pointer}.photo-upload button:disabled{opacity:.55}
.person-node{align-items:center}
.person-head{display:flex;flex-direction:column;align-items:flex-start}
#profile{width:min(780px,calc(100vw - 48px));max-height:calc(100dvh - 64px);padding:30px;overflow:auto}
#profile .close{top:12px;right:17px;z-index:1}
.profile-name{font:500 clamp(25px,3vw,34px)/1.15 Georgia,serif;margin:0 35px 24px 0}
.profile-layout{display:grid;grid-template-columns:minmax(180px,235px) minmax(0,1fr);gap:30px;align-items:start}
.profile-media{min-width:0}
.profile-photo{width:100%;height:auto;max-height:none;aspect-ratio:3/4;object-fit:contain;margin:0;border-radius:10px;background:#f0ede7}
.profile-gallery{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.gallery-choice{width:47px;height:62px;padding:0;border:1px solid #c9c7bd;border-radius:5px;overflow:hidden;background:#f0ede7;cursor:pointer}
.gallery-choice img{width:100%;height:100%;object-fit:cover}
.gallery-choice:hover,.gallery-choice:focus-visible{outline:2px solid #a6844b}
.profile-content{min-width:0;font:14px/1.55 system-ui,sans-serif;color:#304b45}
.profile-bio{margin:0 0 20px;white-space:pre-line;overflow-wrap:anywhere}
.profile-details{display:grid;gap:10px;margin:0 0 20px}
.profile-detail{display:grid;grid-template-columns:115px minmax(0,1fr);gap:12px}
.profile-detail dt{color:#718079}.profile-detail dd{margin:0;overflow-wrap:anywhere}
.profile-person-link{border:0;padding:0;background:none;color:#245c53;text-decoration:underline;text-underline-offset:3px;font:inherit;text-align:left;cursor:pointer}
.profile-social{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.profile-social a{border:1px solid #c9d4cc;border-radius:7px;padding:7px 10px;color:#245c53;text-decoration:none;background:#f4f7f1;font-size:13px}
.profile-social a:hover,.profile-social a:focus-visible{border-color:#6b927e;text-decoration:underline}
@media(max-width:700px){#profile{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:calc(24px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom))}.profile-layout{grid-template-columns:1fr;gap:22px}.profile-photo{width:min(220px,70vw)}.profile-name{margin-bottom:20px}}
@media(max-width:900px) and (max-height:500px){#profile{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:18px 25px}.profile-layout{grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:25px}.profile-photo{width:100%}.profile-name{margin-bottom:14px}}

/* Staand, alleen-lezen familieprofiel. De dialog scrolt op desktop. */
#profile{width:min(440px,calc(100vw - 32px));max-height:min(780px,calc(100dvh - 42px));padding:26px 27px 30px;overflow-y:auto;overscroll-behavior:contain}
#profile .close{position:sticky;top:-15px;float:right;margin:-15px -13px 0 0;width:37px;height:37px;border-radius:50%;background:#fffdfaee;box-shadow:0 1px 8px #173b3822;z-index:2}
#profile-body{clear:both;display:flex;flex-direction:column;align-items:stretch}
.profile-media{display:flex;flex-direction:column;align-items:center;margin:0 0 13px}
.profile-photo{width:156px;height:195px;aspect-ratio:auto;object-fit:cover;border-radius:9px;border:1px solid #dedbd1;box-shadow:0 5px 16px #193b3420}
.profile-name{text-align:center;font:500 27px/1.2 Georgia,serif;margin:0 0 14px;color:#183f3b}
.profile-gallery{justify-content:center;margin:12px 0 0}
.profile-social{justify-content:center;gap:7px;margin:0 0 17px}
.profile-social a{font-size:12px;padding:5px 9px;border-radius:18px}
.profile-content{font-size:13.5px;line-height:1.55}
.profile-bio{margin:0 0 17px}
.profile-details{gap:0;margin:0 0 18px;border-top:1px solid #e7e4dc}
.profile-detail{grid-template-columns:114px minmax(0,1fr);gap:8px;padding:8px 0;border-bottom:1px solid #e7e4dc}
.profile-detail dt{color:#718079}
.profile-detail dd{line-height:1.45}
.profile-detail a{color:#245c53;overflow-wrap:anywhere}
.profile-section-title{font:500 19px Georgia,serif;margin:6px 0 10px;color:#183f3b}
.profile-family{margin-bottom:0}
@media(max-width:700px){#profile{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:calc(22px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));overflow-y:auto}.profile-photo{width:156px;height:195px}}
@media(max-width:900px) and (max-height:500px){#profile{width:100vw;height:100dvh;max-height:100dvh;padding:16px 20px;overflow-y:auto}.profile-photo{width:132px;height:165px}}

/* Foto en fotoreel */
.profile-photo{width:194px;height:243px}
.profile-media{width:100%}
.profile-gallery{width:100%;max-width:330px;display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:7px;padding:3px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.gallery-choice{flex:0 0 54px;width:54px;height:68px;scroll-snap-align:start}
.gallery-choice.is-active{outline:2px solid #a6844b;outline-offset:1px}
.profile-deceased{align-self:center;color:#7b6860;background:#f3eeeb;border-radius:12px;padding:3px 9px;font-size:12px;margin:-4px 0 16px}
.profile-other{margin:0;white-space:pre-line;overflow-wrap:anywhere}
@media(max-width:700px){.profile-photo{width:194px;height:243px}}
@media(max-width:900px) and (max-height:500px){.profile-photo{width:150px;height:188px}}

/* Foto's behouden hun volledige verhouding, ook bij smalle portretten. */
.profile-media{width:100%;margin-bottom:12px}
.profile-photo-row{width:100%;display:flex;align-items:center;justify-content:center;gap:7px}
.profile-photo-button{border:0;padding:0;background:transparent;max-width:min(245px,calc(100% - 82px));display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer}
.profile-photo{width:auto;height:auto;max-width:100%;max-height:305px;aspect-ratio:auto;object-fit:contain;margin:0;border-radius:10px;box-shadow:0 7px 20px #132c2a25}
.profile-photo-arrow{width:34px;height:34px;flex:0 0 34px;border:0;border-radius:50%;background:#f4f0e8;color:#294942;font-size:26px;line-height:1;display:grid;place-items:center;box-shadow:0 2px 9px #173b3826;cursor:pointer}
.profile-photo-count{text-align:center;color:#73857b;font-size:12px;margin-top:11px}
#photo-viewer{border:0;border-radius:14px;padding:0;width:min(900px,calc(100vw - 32px));height:min(820px,calc(100dvh - 32px));max-width:none;max-height:none;background:#15352f;color:#fbf9f2;box-shadow:0 30px 90px #081d1a99;overflow:hidden}
#photo-viewer[open]{display:flex;flex-direction:column}
#photo-viewer::backdrop{background:#091d1bbf}
.viewer-top{height:54px;flex:0 0 54px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;font-size:13px}
#close-photo-viewer{border:0;background:none;color:inherit;font-size:29px;padding:4px 9px;line-height:1;cursor:pointer}
.viewer-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px 14px}
#viewer-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
#viewer-caption{text-align:center;margin:0;padding:9px 16px 12px;font-size:14px;white-space:pre-line}
.viewer-rail-row{display:flex;align-items:center;gap:5px;padding:7px 11px 17px}
.viewer-rail-arrow{width:32px;height:36px;flex:0 0 32px;border:0;background:transparent;color:#fbf9f2;font-size:25px;line-height:1;cursor:pointer}
#viewer-rail{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;min-width:0;flex:1;overscroll-behavior-x:contain}
#viewer-rail::-webkit-scrollbar{display:none}
.viewer-thumb{width:49px;height:62px;flex:0 0 49px;padding:0;border:2px solid transparent;border-radius:6px;background:#243c33;overflow:hidden;cursor:pointer}
.viewer-thumb.is-active{border-color:#e8cf9a}
.viewer-thumb img{width:100%;height:100%;object-fit:contain;display:block}
@media(min-width:901px){
  #profile{padding:0;overflow:hidden}
  #profile-body{max-height:min(780px,calc(100dvh - 42px));overflow-y:auto;padding:26px 18px 30px 27px;margin-right:10px;scrollbar-width:thin}
  #profile .close{position:absolute;top:12px;right:20px;margin:0}
}
@media(max-width:700px){
  #profile{position:fixed;inset:0;margin:0;width:100dvw;min-width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:0;padding:calc(22px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));overflow-y:auto}
  #photo-viewer{position:fixed;inset:0;margin:0;width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:0}
}
.profile-edit{align-self:center;margin:-4px 0 15px;color:#245c53;font-size:13px;text-decoration:none;border:1px solid #c9d4cc;border-radius:20px;padding:7px 13px}