/* Unified mobile responsiveness layer (May 2026)
   Shared across signup/signin/home/household/bloodline/tree/network/community. */

:root{
  --mobile-safe-bottom: max(14px, env(safe-area-inset-bottom));
}

*{
  -webkit-tap-highlight-color: rgba(37,99,235,.14);
}

html,body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

body{
  overflow-x:hidden;
}

.brand-pill .za,
.brand-pill .zi,
.brand-mark .brand-half,
.brand-mark .za,
.brand-mark .zi,
.logo .za,
.logo .zi{
  min-width:64px !important;
  padding:0 11px !important;
  font-size:15px !important;
  letter-spacing:-.02em !important;
  text-transform:lowercase !important;
}

/* Generic topbar/nav tightening */
@media (max-width: 980px){
  .topbar{
    position:sticky;
    top:0;
    z-index:1200;
  }
  .topbar-inner{
    width:100%;
    max-width:none !important;
    gap:10px !important;
    padding:10px 12px !important;
  }
  .search{
    min-width:0;
  }
  .search input{
    width:100% !important;
  }
}

@media (max-width: 760px){
  .brand-pill .za,
  .brand-pill .zi,
  .brand-mark .brand-half,
  .brand-mark .za,
  .brand-mark .zi,
  .logo .za,
  .logo .zi{
    min-width:56px !important;
    padding:0 9px !important;
    font-size:13px !important;
  }

  .topbar-inner{
    grid-template-columns:auto auto !important;
    grid-template-areas:
      "brand actions"
      "search search"
      "nav nav" !important;
    align-items:center !important;
  }
  .logo-wrap,.brand{
    grid-area:brand;
  }
  .top-actions,.top-right{
    grid-area:actions;
    justify-self:end;
  }
  .search{
    grid-area:search;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    justify-self:stretch !important;
  }
  .search input{
    width:100% !important;
    height:40px !important;
    padding:0 14px 0 40px !important;
    border-radius:999px !important;
    color:inherit !important;
    font-size:14px !important;
    caret-color:auto !important;
    pointer-events:auto !important;
  }
  .nav,.top-center{
    grid-area:nav;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap;
    flex-wrap:nowrap !important;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar,
  .top-center::-webkit-scrollbar{
    display:none;
  }
}

/* Home shell / rails */
@media (max-width: 980px){
  body.home-page .topbar-inner{
    grid-template-columns:auto auto !important;
    grid-template-areas:
      "brand actions"
      "search search"
      "nav nav" !important;
    gap:10px !important;
    padding:10px 12px !important;
  }
  body.home-page .logo-wrap{grid-area:brand !important;}
  body.home-page .top-right{grid-area:actions !important;justify-self:end !important;}
  body.home-page .search-box{grid-area:search !important;min-width:0 !important;}
  body.home-page .nav{
    grid-area:nav !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    padding-bottom:3px !important;
  }
  body.home-page .nav > a,
  body.home-page .nav > .me-item > .me-trigger,
  body.home-page .nav > .wallet-nav-btn{
    min-width:72px !important;
  }
  body.home-page .layout{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "left"
      "center"
      "right" !important;
    gap:12px !important;
    padding:12px !important;
    height:calc(100vh - var(--zazi-nav-height, 64px));
    overflow:auto !important;
  }
  body.home-page .left-rail,
  body.home-page .center-feed,
  body.home-page .right-rail{
    min-height:0;
    max-height:none !important;
    overflow:visible !important;
  }
}

/* Modal fit / scroll behavior */
@media (max-width: 900px){
  .feed-modal .modal-box,
  .comment-modal .modal-box,
  .stories-comments-panel{
    width:min(100%, 100vw - 10px) !important;
    max-width:min(100%, 100vw - 10px) !important;
  }
  .comment-modal .modal-box{
    max-height:92vh !important;
    margin:4vh auto !important;
    border-radius:18px !important;
  }
  .comment-modal-shell{
    max-height:calc(92vh - 10px) !important;
  }
  .comment-modal-scroll{
    overflow:auto !important;
    min-height:0;
  }
  .comment-modal-compose{
    position:sticky !important;
    bottom:0 !important;
    padding-bottom:calc(8px + var(--mobile-safe-bottom)) !important;
    background:#fff !important;
  }
}

/* Stories mobile alignment */
@media (max-width: 980px){
  body.stories-mode .stories-shell{
    top:var(--zazi-nav-height, 64px) !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:auto !important;
  }
  .stories-shell.comments-open{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .stories-shell.comments-open .stories-comments-panel{
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    bottom:10px !important;
    top:auto !important;
    max-height:52vh !important;
    border-radius:16px !important;
    z-index:50;
  }
  .stories-close-btn{
    top:10px !important;
    left:10px !important;
  }
  .story-frame{
    width:min(100%, 560px) !important;
    max-width:560px !important;
    height:min(82vh, calc(100vh - var(--zazi-nav-height, 64px) - 20px)) !important;
    margin:0 auto !important;
  }
  .story-frame.story-landscape{
    height:min(58vh, calc(100vh - var(--zazi-nav-height, 64px) - 20px)) !important;
  }
}

/* Person cards: single responsive spec */
.person-card,
.compact-card,
.child-card{
  min-width:0;
}

.person-strip .strip-name,
.compact-strip .strip-name{
  display:block !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  line-height:1.01 !important;
  font-size:clamp(12px,2.4vw,15px) !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  text-align:center !important;
  max-width:100% !important;
  padding-inline:0 !important;
}

.person-strip .strip-name.split,
.compact-strip .strip-name.split{
  display:grid !important;
  grid-template-rows:auto auto !important;
  gap:1px !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  line-height:1.05 !important;
  align-items:center !important;
}

.person-strip .strip-name.split .name-main,
.person-strip .strip-name.split .name-sub,
.compact-strip .strip-name.split .name-main,
.compact-strip .strip-name.split .name-sub{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  line-height:1.02 !important;
}

.person-strip .strip-name .name-main,
.person-strip .strip-name .name-sub,
.compact-strip .strip-name .name-main,
.compact-strip .strip-name .name-sub{
  display:block !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.person-strip .strip-name .name-sub,
.compact-strip .strip-name .name-sub{
  font-size:.92em !important;
  opacity:.98 !important;
}

.person-strip,
.compact-strip{
  min-height:46px !important;
  padding-top:4px !important;
  padding-bottom:3px !important;
  padding-left:12px !important;
  padding-right:68px !important;
}

.person-body{
  gap:8px !important;
  padding:14px 10px 12px !important;
}

.person-avatar-wrap,
.avatar-wrap{
  margin-top:-10px !important;
  width:100% !important;
  justify-content:center !important;
}

.compact-avatar-wrap{
  width:100% !important;
  justify-content:center !important;
}

.person-avatar,
.avatar{
  width:82px !important;
  height:82px !important;
  font-size:24px !important;
}

.person-strip .strip-name.split,
.compact-strip .strip-name.split{
  width:100% !important;
}

.person-strip .strip-name.split .name-main,
.person-strip .strip-name.split .name-sub,
.compact-strip .strip-name.split .name-main,
.compact-strip .strip-name.split .name-sub{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.card-menu summary{
  line-height:1 !important;
}

.post-card,
.post-head,
.post-head-right,
.post-more-wrap{
  overflow:visible !important;
}

.post-more-menu{
  z-index:5000 !important;
  background:#fff !important;
  border:1px solid #dbe4f3 !important;
  border-radius:12px !important;
  box-shadow:0 18px 36px rgba(15,23,42,.16) !important;
  color:#0f172a !important;
  -webkit-backface-visibility:hidden !important;
  backface-visibility:hidden !important;
}

.post-more-menu,
.post-more-menu *{
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  text-shadow:none !important;
  opacity:1 !important;
  visibility:visible !important;
}

.post-more-menu .post-more-head,
.post-more-menu .post-more-item,
.post-more-menu .post-more-item .post-more-item-label{
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  visibility:visible !important;
  opacity:1 !important;
  font-size:13px !important;
  line-height:1.35 !important;
  text-shadow:none !important;
  -webkit-appearance:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

.post-more-menu .post-more-head-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
}

.post-more-menu .post-more-close{
  width:28px !important;
  height:28px !important;
  border:1px solid #d8e2f0 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#475467 !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1 !important;
  display:grid !important;
  place-items:center !important;
}

.post-more-menu .post-more-item{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:38px !important;
  background:transparent !important;
  width:100% !important;
  border:0 !important;
  text-align:left !important;
}

.post-more-menu .post-more-item .icon{
  width:16px !important;
  min-width:16px !important;
  display:inline-block !important;
  text-align:center !important;
}

.post-more-menu .post-more-item.danger,
.post-more-menu .post-more-item.danger .post-more-item-label{
  color:#b42318 !important;
  -webkit-text-fill-color:#b42318 !important;
}

.post-more-menu .post-more-item.danger *{
  color:#b42318 !important;
  -webkit-text-fill-color:#b42318 !important;
}

.post-more-menu-portal .post-more-menu{
  background:#ffffff !important;
  border:1px solid #dbe4f3 !important;
  box-shadow:0 18px 36px rgba(15,23,42,.16) !important;
}

.post-more-menu-portal .post-more-menu,
.post-more-menu-portal .post-more-menu *{
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  opacity:1 !important;
  visibility:visible !important;
}

.post-more-menu-portal .post-more-item{
  background:#ffffff !important;
}

@media (max-width: 1100px){
  .post-more-wrap .post-more-menu{
    left:0 !important;
    right:auto !important;
    width:min(248px, calc(100vw - 24px)) !important;
  }
}

@media (max-width: 980px){
  :root{
    --person-card-width:174px !important;
  }
  .person-card,
  .compact-card,
  .child-card{
    width:100% !important;
    max-width:320px !important;
    min-height:240px !important;
    margin-inline:auto !important;
  }
  .member-grid,
  .card-grid,
  .child-row,
  .partner-grid{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
  }
}

@media (max-width: 640px){
  .post-more-menu-portal .post-more-menu{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:auto !important;
    bottom:calc(18px + var(--mobile-safe-bottom)) !important;
    width:auto !important;
    max-width:none !important;
    transform:none !important;
    padding:10px !important;
  }
  .person-card,
  .compact-card,
  .child-card,
  .member-card{
    max-width:100% !important;
    border-radius:14px !important;
  }
  .member-grid,
  .card-grid,
  .child-row,
  .partner-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
.person-strip,
.compact-strip{
    min-height:46px !important;
    padding-left:12px !important;
    padding-right:68px !important;
}
.person-strip .strip-name,
.compact-strip .strip-name{
    font-size:clamp(11px,3.2vw,14px) !important;
}
}

/* Sign-in / Sign-up compact mode */
@media (max-width: 980px){
  .page{
    grid-template-columns:1fr !important;
  }
  .visual{
    padding:16px 14px 0 !important;
  }
  .visual-main{
    padding:8px 0 14px !important;
  }
  .form-side{
    border-left:none !important;
    border-top:1px solid #e5e7eb !important;
    padding:14px !important;
  }
  .panel{
    width:min(100%, 560px) !important;
    margin-inline:auto;
  }
}

@media (max-width: 640px){
  .hero-line{
    font-size:clamp(2rem, 11vw, 2.8rem) !important;
  }
  .field input{
    height:48px !important;
    font-size:14px !important;
  }
  .social-row,
  .form-grid,
  .name-grid,
  .action-row{
    grid-template-columns:1fr !important;
  }
  .panel{
    border-radius:16px !important;
    padding:12px !important;
  }
}

/* Global mobile scroll polish */
*{
  scrollbar-width: thin;
  scrollbar-color: #0b63b9 #dbe6f2;
}
*::-webkit-scrollbar{
  width:8px;
  height:8px;
}
*::-webkit-scrollbar-track{
  background:#dbe6f2;
  border-radius:999px;
}
*::-webkit-scrollbar-thumb{
  background:#0b63b9;
  border-radius:999px;
}
*::-webkit-scrollbar-thumb:hover{
  background:#094f93;
}

/* Shared composer/form density on mobile */
@media (max-width: 980px){
  .modal-box,
  .create-community-modal,
  .composer-modal,
  .post-modal{
    width:min(100vw - 14px, 760px) !important;
    max-width:min(100vw - 14px, 760px) !important;
    max-height:92vh !important;
    border-radius:16px !important;
  }
  .modal-body,
  .post-modal-body,
  .composer-body{
    max-height:calc(92vh - 120px) !important;
    overflow:auto !important;
  }
  .form-grid,
  .input-grid,
  .settings-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
}

/* Person-card consistency across family pages */
.person-card,
.compact-card,
.child-card,
.member-card{
  border-width:1px !important;
}

@media (max-width: 1200px){
  .member-grid,
  .card-grid,
  .child-row,
  .partner-grid{
    gap:12px !important;
  }
}

@media (max-width: 760px){
  .person-card,
  .compact-card,
  .child-card,
  .member-card{
    min-height:220px !important;
    padding:0 !important;
  }
}

/* Stories: keep controls visible and never clipped */
body.stories-mode .stories-shell{
  overflow:hidden;
}

body.stories-mode .story-frame{
  position:relative !important;
}

body.stories-mode .story-player-controls{
  top:12px !important;
  left:12px !important;
  right:auto !important;
  z-index:30 !important;
  max-width:calc(100% - 24px) !important;
}

body.stories-mode .stories-close-btn{
  z-index:70 !important;
}

@media (max-width: 1280px){
  body.stories-mode .stories-shell.comments-open{
    grid-template-columns:minmax(0,1fr) minmax(300px, 34vw) !important;
  }
  body.stories-mode .stories-shell.comments-open .story-stage{
    justify-content:flex-start !important;
    padding-left:clamp(8px, 1.6vw, 18px) !important;
  }
  body.stories-mode .stories-shell.comments-open .story-action-rail{
    right:8px !important;
  }
}

@media (max-width: 980px){
  body.stories-mode .story-player-controls{
    top:10px !important;
    left:10px !important;
    transform:none !important;
  }
  body.stories-mode .story-frame{
    width:min(100%, 500px) !important;
    max-width:500px !important;
  }
  body.stories-mode .stories-shell.comments-open .story-stage{
    padding-left:0 !important;
    justify-content:center !important;
  }
  body.stories-mode .story-action-rail{
    right:12px !important;
  }
}

/* Comment modal full post visibility */
@media (max-width: 980px){
  .comment-modal .modal-box{
    width:min(100vw - 12px, 920px) !important;
    max-width:min(100vw - 12px, 920px) !important;
  }
  .comment-modal-shell{
    max-height:90vh !important;
  }
  .comment-modal-scroll{
    max-height:calc(90vh - 180px) !important;
    overflow:auto !important;
    padding-bottom:8px !important;
  }
  .comment-modal-post-card{
    border-radius:14px !important;
  }
}

/* Left/center/right panel predictability on tablet/mobile */
@media (max-width: 1200px){
  body.home-page .layout{
    gap:12px !important;
  }
}

@media (max-width: 980px){
  body.home-page .left-rail,
  body.home-page .center-feed,
  body.home-page .right-rail{
    border-radius:16px !important;
    padding:10px !important;
  }
}