.family-diagram{margin:24px 0 30px;padding:20px 16px 12px;border:1px solid #c5d2c9;border-radius:12px;background:#fbfcf8;overflow:hidden}
.family-diagram-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.family-diagram-heading h4{font-size:26px;margin:4px 0 0;color:#234b40}.family-diagram-heading .label{font-size:10px}.family-diagram-heading button{font-size:12px;padding:9px 13px;white-space:nowrap;background:#fff;border:1px solid #a6b8ac;border-radius:6px;color:#234b40}
.family-diagram>.sub{font-size:12px;line-height:1.55;margin:12px 0}.family-diagram-tools{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:14px 0 0}.family-diagram-tools label{display:flex;flex-direction:column;gap:5px;font:12px/1.4 system-ui,sans-serif;color:#486355}.family-diagram-tools select{font:13px/1.4 system-ui,sans-serif;padding:7px 30px 7px 10px;max-width:100%;background:white;border:1px solid #c2cfc5;border-radius:5px}.family-diagram-tools label:has([data-tree-family]){max-width:100%}
.ancestor-scroll{overflow:auto;overscroll-behavior-x:contain;margin:8px -6px 12px;padding:2px;background:linear-gradient(#fbfcf8,#f4f7f0);border-radius:7px}.ancestor-scroll:focus-visible{outline:3px solid #a98c48;outline-offset:2px}.ancestor-canvas{position:relative;margin:0 auto}.ancestor-lines{position:absolute;inset:0;pointer-events:none}.ancestor-lines path{fill:none;stroke:#5d887b;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}.ancestor-lines .ancestor-link-missing{stroke-dasharray:5 4;stroke:#aab9b0}
button.ancestor-card,.ancestor-card{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;box-sizing:border-box;padding:9px 8px;text-align:center;white-space:normal;border:1px solid #a9bfb1;border-top:3px solid #5d887b;border-radius:8px;background:#fff;color:#233d33;font:12px/1.3 system-ui,sans-serif;box-shadow:0 2px 5px #213e3110;overflow:hidden}
button.ancestor-card{cursor:pointer}button.ancestor-card:hover{background:#eef5ed;border-color:#477861;box-shadow:0 3px 10px #213e3126}button.ancestor-card:focus-visible{outline:3px solid #b79747;outline-offset:3px;z-index:2}.ancestor-card strong{font-size:12px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.ancestor-card .ancestor-years{margin-top:auto;font-size:12px;white-space:nowrap;color:#557064}.ancestor-image{position:relative;display:block;width:74px;height:74px;min-height:74px;border-radius:5px;overflow:hidden;background:#e9eee7;border:1px solid #d2dcd2}.ancestor-initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font:27px/1.2 Georgia,serif;color:#758b7b}.ancestor-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}.ancestor-photo[hidden]{display:none!important}
button.ancestor-selected{border:2px solid #9c7e35;border-top-width:4px;background:#e9eddb;box-shadow:0 2px 7px #7f6f3320}button.ancestor-selected strong{font-weight:750;color:#263e2f}.ancestor-missing{border-style:dashed;border-top-width:1px;background:#f3f6f0;box-shadow:none;justify-content:center;color:#798b7b}.ancestor-empty{font:40px Georgia,serif;color:#b2bdb0;margin-bottom:10px}.ancestor-warning{font-size:9px;line-height:1.1;color:#80662c}
.family-tree-dialog{width:min(1260px,94vw);max-width:94vw;max-height:92vh;padding:18px;border:1px solid #a7b7a5;border-radius:12px;background:#f6f8f1;color:#234b40;overflow:auto}.family-tree-dialog::backdrop{background:#122e25b8}.family-tree-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 4px}.family-tree-dialog-bar h3{font:23px/1.2 Georgia,serif;margin:0}.family-tree-dialog-bar button{padding:9px 15px;border:1px solid #8ca78f;border-radius:5px;background:white;color:#234b40}.family-tree-dialog .family-diagram{margin:16px 0 0}.family-tree-dialog .ancestor-scroll{max-height:66vh}.family-tree-dialog .family-diagram-note{margin-bottom:0}
@media(max-width:640px){.family-diagram{padding:16px 10px 10px;margin:20px 0}.family-diagram-heading h4{font-size:23px}.family-tree-dialog{padding:12px}.family-tree-dialog-bar h3{font-size:20px}.family-tree-dialog .family-diagram{padding:12px 6px}.family-diagram-heading button{font-size:11px;padding:8px 10px}}
@media print{.family-diagram-tools,.family-diagram-heading button{display:none}.family-diagram{break-inside:avoid}.ancestor-scroll{overflow:visible}.ancestor-photo{print-color-adjust:exact}}

.family-tree-dialog .family-diagram-heading,.family-tree-dialog .family-diagram>.sub:first-of-type,.family-tree-dialog .family-diagram-note{display:none}.family-tree-dialog .family-diagram{padding-top:8px}.family-tree-dialog .family-diagram-tools{margin-top:0}.family-tree-dialog .ancestor-scroll{max-height:none}
