/* The archive shell gives the family canvas the space left by navigation. */
body:is([data-archive-view="tree"],[data-archive-view="names"]){height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body:is([data-archive-view="tree"],[data-archive-view="names"]) #memberApp{display:flex;flex-direction:column;flex:1;min-height:0;padding-bottom:0}
body:is([data-archive-view="tree"],[data-archive-view="names"]) .portal-header{flex-shrink:0}
body:is([data-archive-view="tree"],[data-archive-view="names"]) .member-welcome,body:is([data-archive-view="tree"],[data-archive-view="names"]) .portal-footer{display:none}
body:is([data-archive-view="tree"],[data-archive-view="names"]) .member-main{flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:14px 22px;display:flex}
body:is([data-archive-view="tree"],[data-archive-view="names"]) #treeView{flex:1;min-height:0;min-width:0}
body:is([data-archive-view="tree"],[data-archive-view="names"]) #familyFrame{height:100%!important;border-radius:5px}
/* The tree has its own camera. Expanding a branch cannot enlarge the page. */
html:has(body.tree-mode){height:100%;overflow:hidden}
body.tree-mode{height:100%;overflow:hidden}
body.tree-mode main.wrap,body.tree-mode #page-tree{height:100%;min-height:0;display:flex;flex-direction:column}
body.tree-mode .treeworkspace{display:flex;flex-direction:column;flex:1;min-height:0;margin:0;border-radius:5px;box-shadow:none}
body.tree-mode .treeviewport{flex:1;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden;touch-action:none;overscroll-behavior:contain;border-radius:0;background-size:24px 24px}
body.tree-mode .treeviewport *{touch-action:none}
body.tree-mode .treestage{position:absolute;inset:0;min-width:0;min-height:0}
.treetoolbar{border-radius:5px 5px 0 0;gap:7px;padding:9px 12px;flex-shrink:0}
.treetoolbar button,.treeMore>summary{min-height:42px;border-radius:4px;font-size:13px;padding:8px 12px}
.treezooms{gap:2px}.treezooms>span{font-variant-numeric:tabular-nums;font-size:12px;min-width:40px}
.treezooms button{min-width:42px;font-size:19px;padding:5px}
#treeFit[aria-pressed="true"]{color:#183e36;background:#e7ece3;border-color:#a7bba7}
.treeMoreMenu{min-width:210px;border-radius:5px;box-shadow:0 8px 28px #102f3626}
.treeMoreMenu button{width:100%;text-align:left}
.treefoot{flex-direction:row;flex-wrap:nowrap;position:relative;display:flex;align-items:center;gap:18px;flex-shrink:0;min-height:36px;padding:8px 13px;background:#faf9f3;border:1px solid #d5d9ca;border-top:0;border-radius:0 0 5px 5px}
.gesture-hint,.treefoot #treeStatus,.tree-key{font-size:11px;line-height:1.4;color:#6a796d;margin:0}
.treefoot #treeStatus{margin-left:auto;white-space:nowrap}
.tree-key>summary{min-height:22px;display:flex;align-items:center;cursor:pointer;white-space:nowrap}
.tree-key>summary:after{content:'＋';margin-left:6px}.tree-key[open]>summary:after{content:'−'}
.tree-key .treelegend{position:absolute;right:12px;bottom:38px;z-index:15;display:grid;gap:12px;width:min(330px,calc(100% - 24px));max-height:60vh;overflow:auto;background:#fffef8;border:1px solid #cbd5c6;padding:20px;margin:0;border-radius:5px;box-shadow:0 7px 22px #102f3626;font-size:13px}
.treeperson{margin:0;width:100%!important;height:100%!important;border-radius:5px;border-width:1px;box-shadow:0 2px 5px #183b3010}
.treeperson.treecenter{border-width:2px}
.treename{padding:12px 14px 8px}.treename strong{font-size:17px;line-height:1.25;margin-top:5px;-webkit-line-clamp:3}.treename strong:has(.tree-portrait){font-size:17px}
.treehint{font-size:10px;letter-spacing:.03em}.treedates{font-size:12px;margin-top:5px}
.treeexpand button{min-height:34px;padding:7px 2px;font-size:11px}.tree-portrait{width:29px;height:29px}
/* The directory reads like a compact index, with full detail one tap away. */
body.names-mode{padding:14px!important}
body.names-mode main{min-height:0}
.names-mode .namepolicy{padding:10px 13px;margin-bottom:13px;border-radius:4px;background:transparent}
.names-mode .namepolicy summary{font-size:13px;font-weight:500}
.names-mode .searchbar{margin-bottom:13px;gap:8px}
.names-mode .searchbar input,.names-mode .searchbar select,.names-mode .searchbar button{min-height:44px;border-radius:4px;font-size:14px}
.names-mode .filterrow{gap:6px;margin:10px 0 16px}.names-mode .filterrow button{min-height:34px;padding:6px 11px;font-size:12px;border-radius:3px}
#namelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:7px}
#namelist .directory-person{display:flex;align-items:center;gap:11px;padding:10px 13px;min-height:68px;border-radius:4px;border:1px solid #d8dccf;background:#fffefb;box-shadow:none}
#namelist .directory-person:hover{background:#eff3e9;border-color:#9caf99}
#namelist .directory-person .avatar{display:flex;width:32px;height:32px;font-size:14px;background:#e9eee4;color:#526c58}
#namelist .directory-person .personname{font-size:15px;font-weight:550;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.directory-meta{display:block;margin-top:3px;font-size:11px;line-height:1.35;color:#798477;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.directory-person .chevron{font-size:19px;color:#8d9a88}
#namelist>.callout{margin:0;padding:12px;font-size:13px;border-radius:4px}#namelist>.callout h3{font-size:16px}
.tree-panel{width:min(850px,calc(100% - 24px));max-height:calc(100dvh - 24px);border-radius:6px;margin:auto;padding:0}
.tree-panel .dialogbar{padding:12px 20px}.tree-panel .dialogbar h2{font-size:23px;margin:0}
.tree-panel .dialogbar button{border-radius:4px;min-width:44px;min-height:44px}
.research-panel-content{padding:20px}.research-panel-content>section:first-child{margin-top:0}
.tree-panel .connection-desk{margin:0;border:0;border-radius:0;box-shadow:none}
.tree-panel .connection-desk>summary{display:none}
.tree-panel::backdrop{background:#102d367d;backdrop-filter:blur(3px)}
@media(max-width:1000px){
 body:is([data-archive-view="tree"],[data-archive-view="names"]) #memberApp{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
 body:is([data-archive-view="tree"],[data-archive-view="names"]) .member-main{padding:8px}
}
@media(max-width:650px){
 .treetoolbar{padding:7px;gap:5px;flex-wrap:nowrap}.treetoolbar button,.treeMore>summary{font-size:12px;padding:7px 9px;min-height:44px}
 .treezooms{gap:0}.treezooms button{min-width:36px;font-size:19px}.treezooms>span{min-width:33px;font-size:11px}
 .treetoolbar .spacer{display:block}.treeMore>summary{padding-inline:9px}#treeHome{font-size:11px;padding-inline:8px}
 .treefoot{gap:10px;padding:6px 10px;min-height:32px}.gesture-hint{display:none}.treefoot #treeStatus,.tree-key{font-size:11px}
 body.names-mode{padding:8px!important}#namelist{grid-template-columns:1fr;gap:5px}#namelist .directory-person{min-height:65px;padding:9px 12px}
 .names-mode .searchbar input{font-size:16px}.names-mode .searchbar select{flex:1;min-width:0;font-size:13px}
 .names-mode .filterrow{gap:5px}.names-mode .filterrow button{min-height:40px;padding:7px 10px}
 .tree-panel{max-height:calc(100dvh - 12px);width:calc(100% - 12px)}.tree-panel .dialogbar{padding:9px 13px}.tree-panel .dialogbar h2{font-size:21px}
 .research-panel-content{padding:13px}.tree-panel .connection-form{grid-template-columns:1fr}
}
@media(max-width:360px){#treeHome{display:none}.treezooms button{min-width:40px}}
@media(prefers-reduced-motion:reduce){.treesvg{transition:none}}

body:is([data-archive-view="tree"],[data-archive-view="names"])>.language-bar{flex-shrink:0}
.names-mode .filterrow select{max-width:100%;min-height:40px;border-radius:4px;font-size:13px}.names-mode .results{font-size:12px;margin-bottom:10px}
@media(max-width:650px){
 .names-mode .searchbar{display:flex;flex-wrap:nowrap;align-items:center}
 .names-mode .searchbar input{flex:1 1 0;width:0;min-width:0;height:44px;padding:10px 12px}
 .names-mode .searchbar button{flex:none;height:44px;padding:8px 11px}
 .names-mode .filterrow{margin-bottom:10px;padding-bottom:10px}
}