/*
 * Family Tree — responsive.css
 * Mobile-only layer (max-width: 720px).
 *
 * This file is intended to load AFTER style.css.
 * It contains the mobile rules already present in the current desktop stylesheet,
 * followed by a small set of scoped mobile corrections for the layouts shown on
 * the current project pages. Desktop rules are not touched by this file.
 */

@media(max-width:720px){.side-nav{position:fixed;top:auto;bottom:0;right:0;left:0;width:100%;height:70px;padding:6px 10px;flex-direction:row;justify-content:center;border-top:1px solid var(--line);border-right:0;box-shadow:0 -10px 30px rgba(30,68,45,.08)}.brand,.side-bottom{display:none}.side-nav nav{flex-direction:row;justify-content:space-around;gap:5px}.side-nav nav a{padding:4px 15px;border-radius:14px}.side-nav nav a span{font-size:15px}.main-content{margin-right:0;margin-bottom:28px}.site-footer{margin-right:0;margin-bottom:70px}.top-header{height:68px;padding:0 18px}.mobile-brand{display:block}.top-note{font-size:12px}.top-action{font-size:14px}.hero{padding:40px 20px 45px;gap:30px;min-height:auto}.hero h1{font-size:42px}.hero-copy>p{font-size:17px}.hero-actions .btn{width:100%}.demo-tree{height:390px;border-radius:24px}.demo-person{width:106px;padding:7px}.demo-person .avatar{width:45px;height:45px}.root-person{left:calc(50% - 53px)}.p1{right:10px}.p2{left:calc(50% - 53px)}.p3{left:10px}.p4{right:10px}.p5{left:calc(50% - 53px)}.p6{left:10px}.benefits{margin:0 20px;grid-template-columns:1fr}.benefits>div{border-left:0;border-bottom:1px solid var(--line)}.benefits>div:last-child{border-bottom:0}.home-intro{margin:35px 20px;padding:25px;display:block}.home-intro h2{font-size:32px}.page-head,.content-page,.tree-editor-head{padding:35px 20px 20px}.page-head h1,.content-page h1,.tree-editor-head h1{font-size:36px}.account-grid,.editor-layout{padding-left:20px;padding-right:20px}.panel{padding:20px}.tree-row{align-items:flex-start;flex-direction:column}.row-actions{width:100%}.row-actions .btn{flex:1}.auth-page{padding:30px 16px}.auth-card{padding:28px 20px;border-radius:22px}.auth-card h1{font-size:36px}.footer-inner{padding:22px 20px;flex-direction:column-reverse;align-items:stretch;text-align:center}.footer-links{justify-content:center;flex-wrap:wrap;gap:18px}.editor-layout{overflow:hidden}.tree-canvas{height:600px;min-width:620px}.tree-editor-head{padding-bottom:15px}.tree-toolbar{width:100%}.tree-toolbar .btn{flex:1}.two-col{grid-template-columns:1fr}.modal-box{padding:24px 18px}.admin-top{height:auto;min-height:74px;padding:15px 20px;gap:10px;align-items:flex-start;flex-direction:column}.admin-top nav{gap:12px;flex-wrap:wrap;font-size:13px}.admin-main{padding:30px 20px}.stats-grid,.admin-cards{grid-template-columns:1fr}}

@media(max-width:720px){
  .top-action-btn{min-width:66px;min-height:28px;padding:6px 14px;border-radius:11px}
  .memory-banner{width:100%;justify-content:flex-start;margin-bottom:18px;padding:9px 12px}
  .memory-banner small{display:none}
  .hero h1{font-size:38px;line-height:1.18}
  .site-footer{margin-bottom:70px}
  .footer-inner{direction:rtl;padding:20px;align-items:center}
  .footer-inner .copyright{text-align:center;order:2}
  .footer-links{order:1}
}

@media(max-width:720px){
  .hero-tree-wrap{min-height:430px;margin-top:0}
  .hero-tree-art{height:430px;width:100%;max-width:520px}
  .hero-tree-art .demo-person{width:86px}
  .hero-tree-art .demo-person .avatar{width:58px;height:58px;border-width:5px;font-size:30px}
  .hero-tree-art .demo-person strong{font-size:11px;padding-top:2px}
  .hero-tree-art .demo-person small{font-size:9px;padding-bottom:3px}
  .hero-tree-art .root-person{top:72px;left:calc(50% - 43px)}
  .hero-tree-art .p1{top:172px;left:2%}
  .hero-tree-art .p2{top:168px;left:calc(50% - 43px)}
  .hero-tree-art .p3{top:172px;right:2%}
  .hero-tree-art .p4{top:282px;left:8%}
  .hero-tree-art .p5{top:288px;left:calc(50% - 43px)}
  .hero-tree-art .p6{top:282px;right:8%}
}

@media(max-width:720px){.hero-tree-wrap{min-height:430px}.hero-tree-art{height:430px;max-width:520px}.tree-crown{top:22px;height:245px;transform:scale(.72);transform-origin:top center}.tree-trunk{height:240px;width:68px;bottom:42px}.tree-branch{height:18px}.branch-1{width:125px}.branch-2{width:120px}.branch-3{width:105px}.branch-4{width:105px}.branch-5{width:90px}.branch-6{width:90px}.tree-leaves{transform:scale(.7)}.hero-tree-art .demo-person{width:86px}.hero-tree-art .demo-person .avatar{width:58px;height:58px;border-width:5px;font-size:30px}.hero-tree-art .demo-person strong{font-size:11px;padding-top:2px}.hero-tree-art .demo-person small{font-size:9px;padding-bottom:3px}.hero-tree-art .root-person{top:60px;left:calc(50% - 43px)}.hero-tree-art .p1{top:150px;left:2%}.hero-tree-art .p2{top:145px;left:calc(50% - 43px)}.hero-tree-art .p3{top:150px;right:2%}.hero-tree-art .p4{top:265px;left:7%}.hero-tree-art .p5{top:270px;left:calc(50% - 43px)}.hero-tree-art .p6{top:265px;right:7%}}

@media(max-width:720px){
  .mobile-brand{display:flex;font-size: 12px;}
  .top-action-btn{padding:3px 5px}
  .hero-family-scene{height:430px}
  .hero-tree-wrap{min-height:430px}
  .hero-person{width:92px}
  .hero-avatar{width:50px;height:50px}
  .hero-avatar svg{width:26px;height:26px}
  .hero-person strong{font-size:11px}
  .hp-root{top:25px;left:calc(50% - 46px)}
  .hp-left{top:155px;left:3%}.hp-right{top:155px;right:3%}
  .hp-child1{top:292px;left:10%}.hp-child2{top:298px;left:calc(50% - 46px)}.hp-child3{top:292px;right:10%}
  .tree-canvas{min-width:720px;height:650px;min-height:650px}
  .tree-editor-head{padding-top:30px}
}

@media(max-width:720px){.side-nav{width:100%;height:68px;padding:5px 8px}.side-nav nav a,.side-bottom a{min-height:56px;padding:4px 13px}.side-nav nav a span,.side-bottom a span{font-size:11px}.side-nav nav a .nav-icon,.side-bottom a .nav-icon{width:19px;height:19px}.main-content{margin-right:0;margin-bottom:28px}.auth-page{padding:26px 15px}.auth-card{padding:30px 20px;border-radius:24px}.verification-icon{width:72px;height:72px}.verification-card h1{font-size:31px}.verification-code{height:58px;font-size:27px;letter-spacing:9px}}

@media(max-width:720px){
 .side-nav{width:100%;height:68px;padding:5px 8px}
 .main-content{margin-right:0;margin-bottom:28px}
 .side-nav nav a,.side-bottom a{min-height:56px;padding:4px 13px}
 .side-nav nav a span,.side-bottom a span{font-size:11px}
 .side-nav .nav-icon{width:18px;height:18px}
 .mobile-brand{display:flex}
 .auth-card.verification-card{padding:28px 20px}
}

@media(max-width:720px){.tree-editor-head .tree-editor-back{margin-bottom:12px}.tree-toolbar .btn{min-height:44px}.editor-panel{border-radius:20px}.tree-canvas{border-radius:22px}.editor-natural-art img{width:760px;max-width:none;margin-top:-95px}}

@media(max-width:720px){.node-actions{opacity:1;pointer-events:auto}.node-action{width:28px;height:28px}}

@media(max-width:720px){
  .hero-create-preview{max-width:500px}
  .hero-create-preview-art{width:min(360px,100%);height:330px}
  .hero-create-preview-copy h2{font-size:28px}
  .hero-create-preview-copy p{font-size:13px}
  .hero-create-features{gap:6px}
  .hero-create-features div{font-size:10px;padding:7px 9px}
  .hero-create-badge{right:2px;bottom:14px}
}

@media(max-width:720px){
  .hero-create-preview-art{width:min(410px,100%);height:380px}
  .hero-create-features{flex-wrap:wrap}
}

@media(max-width:720px){.families-head{width:calc(100% - 30px);padding:32px 0 20px;align-items:flex-start;flex-direction:column}.families-head h1{font-size:36px}.families-head p{font-size:15px}.families-head-badge{align-self:stretch}.families-page{width:calc(100% - 30px);padding-bottom:35px}.families-grid{grid-template-columns:1fr;gap:15px}.family-card-art{height:125px}.family-card-art img{width:185px;height:185px}}

@media(max-width:720px){
  .home-hero{
    padding:30px 20px 42px;
  }
  .home-hero-inner{
    display:flex;
    flex-direction:column-reverse;
    gap:25px;
    min-height:0;
  }
  .home-copy{
    width:100%;
    padding:0;
    text-align:center;
  }
  .home-memory-banner{
    margin:0 auto 18px;
  }
  .home-copy h1{
    font-size:40px;
  }
  .home-copy>p{
    font-size:16px;
  }
  .home-copy .hero-actions{
    justify-content:center;
  }
  .home-copy .btn-lg{
    width:100%;
  }
  .home-tree-art{
    height:330px;
    max-width:440px;
  }
  .home-tree-message h2{
    font-size:28px;
  }
  .home-tree-badges{
    gap:3px;
  }
  .home-tree-badge{
    padding:7px 3px;
    font-size:10px;
  }
  .home-tree-badge span{
    width:19px;
    height:19px;
    flex-basis:19px;
  }
}

@media(max-width:720px){
  .editor-panel .check{font-size:13px;padding:9px 11px}
}

@media(max-width:720px){
  .home-hero::before{background-size:105px 105px,135px 135px,165px 165px;opacity:.32}
  .home-hero::after{width:360px;height:360px;left:-220px;top:-170px}
  .home-memory-banner{min-height:44px;padding:5px 7px}
  .home-memory-banner strong{padding:6px 3px;font-size:13px}
  .home-memory-banner span{width:28px;height:28px}
}

@media(max-width:720px){
  .families-page .family-card-art{height:130px}
  .public-tree-head{width:calc(100% - 30px);padding:28px 0 18px;align-items:flex-start;flex-direction:column;gap:15px}
  .public-tree-heading .eyebrow{margin-top:14px}
  .public-tree-heading h1{font-size:36px}
  .public-tree-heading p{font-size:14px}
  .public-tree-badge{align-self:stretch}
  .public-tree-stage{width:calc(100% - 30px);min-height:620px;border-radius:22px}
  .public-tree-art{inset:55px 10px 10px}
  .public-tree-art .family-tree-art{width:95%;max-height:520px}
  .public-tree-caption{top:14px}
  .public-tree-stage .tree-canvas{height:100%;min-width:0}
}

@media(max-width:720px){.brand{gap:4px}.brand-mark{width:44px;height:44px;border-radius:14px}.brand-symbol{font-size:25px}.brand-name{font-size:10px}}

@media(max-width:720px){.brand-symbol .brand-logo{width:28px;height:28px}.mobile-brand .brand-symbol .brand-logo{width:23px;height:23px;}}

@media(max-width:720px){.about-page{padding:34px 22px!important;border-radius:22px}.about-page h1{font-size:36px}.about-page .about-lead{font-size:15px}.about-page .content-cards{grid-template-columns:1fr}}
/* =========================================================
   Mobile final refinements
   Scoped to mobile only.
   ========================================================= */
@media (max-width:720px){
  /* Homepage: remove the unnecessary vertical void before the footer. */
  .home-hero{
    min-height:0;
    padding-bottom:8px;
  }
  .home-hero-inner{
    min-height:0;
  }
  .benefits{
    margin-top:0;
    margin-bottom:0;
    border-radius:22px;
  }

  /* Footer: keep copyright and links close without making the footer tall. */
  .site-footer{
    margin-bottom:68px;
  }
  .footer-inner{
    min-height:0;
    padding:16px 18px 14px;
    gap:8px;
  }
  .footer-inner .copyright{
    line-height:1.6;
  }
  .footer-links{
    gap:12px 18px;
  }

  /* Tree editor: fit the approved tree artwork to the phone viewport instead of
     forcing a 760px image across a 360–430px screen. The canvas remains scrollable
     for larger family layouts, so saved member positions are not rewritten. */
  .editor-layout{
    padding-left:12px;
    padding-right:12px;
    overflow:hidden;
  }
  .tree-canvas{
    min-width:0;
    width:100%;
    height:620px;
    min-height:620px;
    overflow:auto;
  }
  .editor-natural-art{
    align-items:flex-start;
    justify-content:center;
  }
  .editor-natural-art img{
    width:92%;
    max-width:520px;
    height:auto;
    margin-top:0;
  }

  /* Public family tree: the faded reference artwork must stay inside the stage
     on phones; the interactive canvas remains independently scrollable. */
  .public-tree-wrap{
    padding-bottom:24px;
  }
  .public-tree-stage{
    min-height:560px;
    height:560px;
    overflow:hidden;
  }
  .public-tree-art{
    inset:58px 8px 8px;
    overflow:hidden;
  }
  .public-tree-art .family-tree-art{
    width:100%;
    max-width:360px;
    max-height:470px;
    height:auto;
    object-fit:contain;
  }
  .public-tree-stage .tree-canvas{
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .public-tree-caption{
        max-width: calc(100% - 24px);
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 2px 5px;
  }

  /* Family cards: keep the artwork compact and avoid excessive vertical growth. */
  .families-grid{
    width:100%;
  }
  .families-page .family-card-art{
    height:120px;
  }

  /* Small phones: prevent large headings/buttons from causing horizontal overflow. */
  .home-copy h1{
    font-size:36px;
  }
  .hero h1{
    font-size:36px;
  }
  .page-head h1,.content-page h1,.tree-editor-head h1{
    font-size:32px;
  }
  .btn,.btn-lg{
    max-width:100%;
  }
}

@media (max-width:390px){
  .top-header{padding-left:5px;padding-right:5px}
  .top-note{font-size:11px}
  .top-action{font-size:13px}
  .home-hero{padding-left:8px;padding-right:8px}
  .benefits{margin-left:14px;margin-right:14px}
  .home-tree-art{height:300px}
  .home-tree-message h2{font-size:25px}
  .footer-inner{padding-left:14px;padding-right:14px}
  .footer-links{gap:10px 14px}
  .public-tree-head{width:calc(100% - 24px)}
  .public-tree-stage{width:calc(100% - 24px);min-height:520px;height:520px}
  .public-tree-art .family-tree-art{max-width:330px;max-height:430px}
}

/* ===== Public family tree — mobile coordinate-safe presentation =====
/* Keep the original 760x700 coordinate system and scale the complete canvas.
   This keeps the artwork, people and connection lines in the exact same
   relative positions saved by the user. Mobile only. */
@media (max-width:720px){
  .public-tree-stage .tree-canvas{
    top:0;
    right:auto;
    bottom:auto;
    left:50%;
    width:760px;
    min-width:760px;
    max-width:760px;
    height:700px;
    min-height:700px;
    max-height:700px;
    overflow:hidden;
    transform:translateX(-50%) scale(.44);
    transform-origin:top center;
  }

  .public-tree-original-art{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    overflow:hidden;
    pointer-events:none;
  }

  .public-tree-original-art img{
    display:block;
    width:620px;
    max-width:620px;
    height:620px;
    max-height:620px;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
  }
}

@media (max-width:390px){
  .public-tree-stage .tree-canvas{
    transform:translateX(-50%) scale(.42);
  }
}