/* Mobile interaction fixes. Identity, names, and section order are unchanged. */
/* Keep scrolling within an open layer and protect close controls from shrinking. */
body:has(dialog[open]){overflow:hidden}
dialog{overscroll-behavior:contain}
.dialog-heading>.close,.dialog-heading>form,.sheet-heading>button{flex-shrink:0}
.relation-paths{grid-template-columns:repeat(2,minmax(0,1fr))}
.relation-paths li button{min-width:0;overflow-wrap:anywhere}
.person-primary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;grid-column:1/-1;margin:12px 0 18px}
.person-primary-actions button{min-height:48px;min-width:0;padding:10px 8px;font-size:.94rem;line-height:1.7}
.my-relatives-owner-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.my-relatives-owner-row>p{flex:1;min-width:180px}.my-relatives-owner-row>button{min-height:44px}
.my-name-picker{margin-top:18px}.my-name-picker input{font-size:1rem}
#my-name-count{margin:12px 0 8px}.my-name-picker .picker-option>span{font-weight:600;color:#315b41}
.compare-status{margin:18px 0 0;padding:10px 12px;background:#f0f5ed;border-radius:8px;color:#31543d;font-size:.875rem;line-height:1.9}
.compare-status.is-warning{background:#fcf6e8;color:#755014}
#compare-dialog.has-result #compare-status{display:none}
#image-viewport{touch-action:none;overscroll-behavior:contain}
#tree-touch-toggle{display:none}
.source-name-image{display:block;max-width:100%;width:auto;height:auto;min-width:140px;max-height:40dvh;margin:20px auto;object-fit:contain;image-rendering:auto}
.branch-load-status{font-size:.875rem;line-height:1.8}
/* Search dialogs follow the visible keyboard area on phones and tablets. */
#compare-dialog,#correction-dialog,#group-dialog,#relatives-dialog,#my-relatives-dialog{max-height:min(90dvh,calc(var(--available-height,100dvh) - 24px));box-sizing:border-box}
#group-dialog,#relatives-dialog,#my-relatives-dialog{overflow:auto}
body.viewport-keyboard #compare-dialog,body.viewport-keyboard #correction-dialog,body.viewport-keyboard #group-dialog,body.viewport-keyboard #relatives-dialog,body.viewport-keyboard #my-relatives-dialog{position:fixed;inset-block-start:calc(var(--visual-top,0px) + 12px);inset-block-end:auto;margin-block:0}
/* A wide touchscreen still needs a way to switch between page scroll and pan. */
@media(any-pointer:coarse),(max-width:760px){
 #tree-touch-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
 #tree-touch-toggle[aria-pressed=true]{background:#173f32;color:#fff}
 #graph{overflow:hidden;touch-action:pan-y;overscroll-behavior:auto}
 #graph .tree-node{touch-action:pan-y}
 #graph.touch-exploration,#tree-fullscreen #graph{overflow:auto;touch-action:none;overscroll-behavior:contain}
 #graph.touch-exploration .tree-node,#tree-fullscreen #graph .tree-node{touch-action:none}
 #tree-fullscreen #tree-touch-toggle{display:none}
}
@media(max-width:760px){
 input:not([type=hidden]),select,textarea{font-size:1rem}
 .home-search-form .search-clear,#search-clear{width:44px;min-width:44px;min-height:44px;flex-shrink:0;padding:8px}
 .home-search-form input{min-width:0;font-size:1rem}
 .tree-zoom button{width:44px;min-width:44px;min-height:44px}
 .branch-toggle{min-width:44px;width:44px;min-height:44px;height:44px;flex-shrink:0}
 .tree-controls .segmented button{min-height:44px}
 .tree-view-tools{flex-wrap:wrap;gap:8px}
 .tree-view-tools>.quiet,.tree-view-tools select{min-height:44px}
 #graph{min-height:300px;height:58dvh}
 #tree-fullscreen .explorer{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
 dialog{max-height:calc(var(--available-height,100dvh) - 24px);overflow:auto}
 .person-sheet{max-height:min(88dvh,calc(var(--available-height,100dvh) - 12px))}
 #tree-fullscreen{height:var(--available-height,100dvh)}
 #correction-dialog .correction-heading,.dialog-heading{flex-shrink:0}
}

/* The six agreed follow-ups: path clarity and the new contextual actions. */
.relation-paths>section{min-width:0}.relation-paths h4{margin:0 0 6px;font-size:1rem;line-height:1.9;overflow-wrap:anywhere}
.path-help,.path-distance{font-size:.875rem;line-height:1.9}.path-distance{margin:0 0 10px}
.relation-paths .path-arrow{display:block;text-align:center;color:#63816c;line-height:1.2}
.source-person-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}.source-person-tools[hidden]{display:none}
.source-person-tools>strong{flex:1 1 100%;font-size:.94rem;overflow-wrap:anywhere}.source-person-tools>button{min-height:44px;white-space:normal}
.empty-actions{margin-top:14px}.empty-actions button,.missing-name-action{min-height:44px}.missing-name-action{margin-top:10px}

/* Keep the normal tree within its declared height. Fullscreen has its own flex rule. */
#graph{flex:0 0 auto}
#share-dialog>.dialog-heading,#correction-dialog>.dialog-heading{position:sticky;top:0;z-index:4;background:#fff}
.skip-link:focus{position:fixed;inset:12px 12px auto auto;z-index:1000;width:auto;height:auto;margin:0;clip:auto;overflow:visible;white-space:normal}
#route-error{margin-bottom:24px}#route-error button{margin-top:12px;min-height:44px}