/* /css/family-ui.css
   tribeLy • Family UI (CORE-FIRST)
   ✅ ui-core.css = components (tl-card/tl-btn/tl-iconBtn/avatar/etc)
   ✅ family-ui.css = only Family-specific layout + small cosmetics
   ✅ No button styling here (prevents “square buttons” regressions)
*/

/* page width wrapper (optional if your family view already uses tl-page) */
#view-family{
  max-width: 720px;
  margin: 0 auto;
}

/* main stack */
.familyStack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* header */
.familyHeaderTitle{
  font-size:18px;
  font-weight:950;
  letter-spacing:-0.2px;
}
.familyHeaderMeta{
  margin-top:6px;
  color: var(--ui-muted);
  font-size:13px;
  font-weight:800;
}

/* notice card */
.familyNotice{
  border:1px solid rgba(124,58,237,.18);
  background: rgba(124,58,237,.08);
  border-radius: var(--ui-r-card);
  padding: 12px;
}
.familyNoticeTitle{ font-weight:950; }
.familyNoticeSub{
  margin-top:6px;
  color: var(--ui-muted);
  font-size:13px;
  line-height:1.35;
}

/* list */
.familyList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* row (inside tl-cardItem usually) */
.familyRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.familyLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

/* avatar mount (your hydrateAvatar can still fill this) */
.familyAvatarHost{
  width:44px;
  height:44px;
  border-radius:9999px;
  overflow:hidden;
  background:#f3f4f6;
  border:3px solid #fff;
  box-shadow: var(--ui-shadow-soft);
  flex:0 0 auto;
  position:relative;
}
.familyAvatarHost img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.familyAvatarHost .familyAvatarFallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  color: rgba(17,24,39,.55);
}

/* name + badges line */
.familyNameLine{
  font-weight:950;
  letter-spacing:-0.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 260px;

  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap; /* badges can wrap */
}

.familySubLine{
  margin-top:2px;
  font-size:13px;
  color: var(--ui-muted);
  font-weight:800;
}

/* actions: use tl-btn tl-btn-ghost tl-iconBtn in markup */
.familyActions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
  align-items:center;
}

/* role badges (match ui-core chips) */
.badgeRole{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 10px;
  border-radius:9999px;
  font-weight:900;
  font-size:12px;
  line-height:1;
  border:1px solid var(--ui-border);
  background:#fff;
  color: var(--ui-muted);
  white-space:nowrap;
}

.badgeParent{
  background: rgba(124,58,237,.10);
  border-color: rgba(124,58,237,.18);
  color: var(--ui-accent);
}
.badgeChild{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.20);
  color: var(--ui-good);
}
.badgeActive{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.24);
  color: #b45309;
}

/* mobile */
@media (max-width:420px){
  #view-family{ padding: 0; }
  .familyRow{ gap:10px; }
  .familyLeft{ gap:10px; }
  .familyAvatarHost{ width:42px; height:42px; }
  .familyNameLine{ max-width: 190px; }
}