/* Family Book — Family Tree + Members scale alignment.
   Calendar remains the visual reference. Presentation only. */

/* Members: make the directory feel like the same app scale as Calendar. */
@media (min-width:561px){
  .members-page .member-avatar{
    width:60px!important;
    height:60px!important;
    flex:0 0 60px!important;
  }
  .members-page .member-info h3{
    font-size:1.02rem!important;
    line-height:1.2!important;
  }
  .members-page .member-info small{
    font-size:.72rem!important;
    line-height:1.25!important;
  }
  .members-page .member-card-view{
    gap:14px!important;
  }
}

@media (max-width:560px){
  /* Match Calendar's page edge and top spacing: the shared .screen already supplies the mobile gutter. */
  .members-page{
    padding:0 0 92px!important;
  }
  .members-page .members-head{
    padding-left:0!important;
    padding-right:0!important;
    margin-top:0!important;
    margin-bottom:12px!important;
  }

  /* Keep the OUTER rounded directory container, with a small inner gutter. */
  .members-page .members-grid{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:4px 10px!important;
    border-radius:18px!important;
  }

  /* Remove the square inner green row fill while preserving dividers and the rounded outer container. */
  .members-page .member-card,
  .members-page .member-card.has-contact,
  html[data-theme="dark"] .members-page .member-card,
  html[data-theme="dark"] .members-page .member-card.has-contact{
    min-height:76px!important;
    padding-top:9px!important;
    padding-bottom:9px!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .members-page .member-card:first-child{
    padding-top:10px!important;
  }
  .members-page .member-card:last-child{
    padding-bottom:10px!important;
  }
  .members-page .member-card-view{
    min-height:58px!important;
    gap:11px!important;
  }
  .members-page .member-avatar{
    width:50px!important;
    height:50px!important;
    flex:0 0 50px!important;
    font-size:.8rem!important;
  }
  .members-page .member-info h3{
    font-size:.96rem!important;
    line-height:1.18!important;
  }
  .members-page .member-info small{
    font-size:.64rem!important;
    line-height:1.2!important;
  }
  .members-page .member-info .member-linked-account,
  .members-page .member-info .member-managed-profile{
    font-size:.6rem!important;
  }
  .members-page .member-contact-actions.compact a{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
  }
  .members-page .member-contact-actions.compact a svg{
    width:15px!important;
    height:15px!important;
  }

  /* Exact optical centering for the round Add Member control. */
  .members-head .member-add{
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    justify-content:center!important;
    line-height:0!important;
    padding:0!important;
  }
  .members-head .member-add svg{
    display:block!important;
    width:21px!important;
    height:21px!important;
    margin:0!important;
    transform:translateY(6px)!important;
  }
}

/* Members action dropdown: keep the popover in the same visual theme as the directory. */
.members-page .member-menu{
  z-index:80!important;
  overflow:hidden;
}
html[data-theme="dark"] .members-page .member-menu{
  background:#18231d!important;
  border-color:#3b4a40!important;
  box-shadow:0 16px 34px rgba(0,0,0,.42)!important;
}
html[data-theme="dark"] .members-page .member-menu button{
  color:#f3ecdd!important;
  background:transparent!important;
}
html[data-theme="dark"] .members-page .member-menu button:hover,
html[data-theme="dark"] .members-page .member-menu button:focus-visible{
  background:#223128!important;
  color:#b9d5c0!important;
}
html[data-theme="dark"] .members-page .member-menu button.danger{
  color:#e49a9f!important;
}
html[data-theme="dark"] .members-page .member-menu button.danger:hover,
html[data-theme="dark"] .members-page .member-menu button.danger:focus-visible{
  background:#352327!important;
  color:#f2b0b5!important;
}
html[data-theme="dark"] .members-page .member-menu button svg{
  color:currentColor!important;
  stroke:currentColor!important;
}

/* Family Tree: enlarge the readable content while preserving the coordinate geometry. */
.coordinate-tree-page .ct-person strong{
  font-size:.88rem!important;
  line-height:1.12!important;
  font-weight:750!important;
}
.coordinate-tree-page .ct-avatar{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  font-size:.76rem!important;
}
.coordinate-tree-page .ct-person{
  gap:10px!important;
  padding-left:9px!important;
  padding-right:9px!important;
}
.coordinate-tree-page .ct-heart{
  width:30px!important;
  height:30px!important;
}
.coordinate-tree-page .ct-heart svg{
  width:15px!important;
  height:15px!important;
}

@media (max-width:650px){
  /* Match Calendar: rely on the shared mobile .screen gutter instead of adding a second page inset. */
  .tree-page{
    padding:0 0 100px!important;
  }
  .tree-head{
    margin-top:4px!important;
    margin-bottom:18px!important;
  }
  .tree-head-actions{
    gap:8px!important;
  }
  .tree-head-actions .tree-history-add,
  .tree-head-actions .tree-full-btn,
  .tree-head-actions .tree-manage{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
  }
  .tree-head-actions button svg{
    width:21px!important;
    height:21px!important;
    margin:0!important;
  }
  .coordinate-tree-page .ct-person strong{
    font-size:.92rem!important;
  }
  .coordinate-tree-page .ct-avatar{
    width:44px!important;
    height:44px!important;
    flex-basis:44px!important;
  }
  .coordinate-tree-page .ct-board{
    padding:14px!important;
    border-radius:20px!important;
  }
}