/* Family-tree usability tools; isolated from the landing page styles. */
.tree-feedback{color:#943c16;background:#fff6e7;border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:.88rem}
.tree-feedback:empty{display:none}
.tree-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;background:#f8f9fc;border-bottom:1px solid #e2e5ec}
.tree-tools[hidden]{display:none}
.tree-tools button{font:inherit;font-size:.82rem;font-weight:600;min-height:44px;padding:8px 12px;border:1px solid #cad3de;border-radius:9px;background:#fff;color:#1b3a5c;cursor:pointer}
.tree-tools button:hover:not(:disabled){background:#fdf6eb;border-color:#c8963e}
.tree-tools button:disabled{opacity:.45;cursor:default}
.tree-tools output{min-width:48px;text-align:center;font-size:.82rem}
.tree-hint{font-size:.76rem;color:#555}
#memberSummary{flex:1;font-size:.85rem;min-width:160px}
#formSection{scroll-margin-top:72px}
.rank-section.open .rank-body{max-height:none}
.rank-header:focus-visible,button:focus-visible,#previewBody:focus-visible{outline:3px solid #a57020;outline-offset:3px}
#previewBody{display:block;overflow:auto;max-height:75vh;min-height:300px;overscroll-behavior:contain}
#previewEmpty{padding:65px 0}
#treeSvg{display:block;max-width:none;min-height:0;margin:0 auto}
.member-card .btn-remove{width:36px;height:36px;flex-shrink:0}
@media(max-width:600px){
  .nav-buttons{flex-wrap:wrap}.nav-buttons .btn-nav{flex:1 1 140px}
  .form-group input,.form-group select{font-size:16px}
  .sub-members{margin-left:4px;padding-left:8px}
  .tree-hint{flex-basis:100%}
  #previewBody{padding:12px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
}
.sketch-tabs button[aria-pressed="true"],.sketch-tabs button[aria-pressed="true"]:hover:not(:disabled){background:#1b3a5c;color:white;border-color:#1b3a5c}
#downloadBar[hidden]{display:none!important}
#sketchPanel[hidden],#listPanel[hidden],.preview-section[hidden]{display:none!important}
.sketch-intro{font-size:.88rem;line-height:1.8;padding:18px 4px;color:#42536b}
.sketch-help{font-size:.8rem;line-height:1.7;color:#526278;margin:12px 4px}
.sketch-inspector{padding:20px;background:#f5f8fc;border:1px solid #d8e1ed;border-radius:14px}
.sketch-inspector h4{margin:0 0 16px;color:#1b3a5c}
.sketch-inspector .tree-tools{padding:12px 0;background:transparent;border:0}
#sketchRelation{font:inherit;font-size:.88rem;min-height:44px;padding:8px;border:1px solid #cad3de;border-radius:8px;background:white;color:#1b3a5c;max-width:100%}
.sketch-editing #previewBody{background-color:#f8fafc;background-image:radial-gradient(#ccd6e4 1px,transparent 1px);background-size:20px 20px;min-height:330px;max-height:60vh}
.sketch-editing #treeSvg [data-tree-key]{cursor:grab;touch-action:none;outline:none}
.sketch-editing #treeSvg [data-tree-key]:active{cursor:grabbing}
.sketch-editing #treeSvg .sketch-selected>rect,.sketch-editing #treeSvg [data-tree-key]:focus-visible>rect{stroke:#b07922;stroke-width:3}
.sketch-editing #treeSvg>line,.sketch-editing #treeSvg>path,.sketch-editing #treeSvg>circle,.sketch-editing #treeSvg>text{pointer-events:none}
.sketch-editing #sketchCanvasSlot .preview-card{margin:0;border-radius:0 0 14px 14px;box-shadow:none}
.sketch-editing #sketchCanvasSlot .preview-header{display:none}
@media(max-width:600px){.sketch-inspector{padding:14px}#sketchRelation{font-size:16px}.sketch-tabs button{flex:1}.sketch-editing #previewBody{padding:12px;min-height:280px}}
@media print{
  @page{size:A4 landscape;margin:10mm}
  body{background:white!important;overflow:visible!important}
  body>*:not(.preview-section){display:none!important}
  .preview-section,.main-container,.preview-card{padding:0!important;margin:0!important;max-width:none!important;background:#fff!important;box-shadow:none!important;border:none!important;overflow:visible!important}
  .preview-header,.tree-tools,#downloadBar,#previewEmpty{display:none!important}
  .fade-up{opacity:1!important;transform:none!important}
  #previewBody{padding:0!important;min-height:0!important;max-height:none!important;overflow:visible!important}
  #treeSvg{width:100%!important;height:auto!important;max-height:175mm!important;margin:auto!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}