/* ============================================================
   KidDaily 首页 index.html — 新增组件（Phase 3）
   家庭成员弹窗 / 宝贝弹窗步骤条 / 搜索结果联想 / 字数计数 / 角色 chip
   ============================================================ */

/* ---------- 添加宝贝弹窗 · 两步流 ---------- */
.baby-photo-row{display:flex;gap:16px;align-items:flex-start;}
.baby-photo-row .dropzone{flex:1 1 auto;}

/* ---------- 家庭成员弹窗（DESIGN §9.4） ---------- */
.member-search{position:relative;}
.member-search > svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--label);pointer-events:none;}
.member-search input{padding-left:40px;}
.member-results{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);padding:6px;display:none;flex-direction:column;
  max-height:220px;overflow-y:auto;
}
.member-results.is-open{display:flex;}
.member-result{
  display:flex;align-items:center;gap:10px;height:48px;padding:0 10px;
  border-radius:8px;cursor:pointer;text-align:left;width:100%;
  transition:background-color var(--motion-fast) var(--ease-standard);
}
.member-result:hover{background:var(--field);}
.member-result .m-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;
  background:var(--avatar-bg);flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.member-result .m-avatar img{width:100%;height:100%;object-fit:cover;}
.member-result .m-avatar span{font-size:13px;font-weight:600;color:var(--coral-deep);}
.member-result .m-name{font-size:13.5px;font-weight:500;color:var(--ink);line-height:19px;}
.member-result .m-sub{font-size:11.5px;color:var(--muted);line-height:16px;}
.member-results .m-empty{padding:14px 10px;font-size:12.5px;color:var(--muted);line-height:19px;}

.member-list{display:flex;flex-direction:column;}
.member-row{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 8px;
  border-radius:var(--radius-sm);
  transition:background-color var(--motion-fast) var(--ease-standard);
}
.member-row:hover{background:var(--field);}
.member-row .m-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;}
.member-row .m-avatar img{width:100%;height:100%;object-fit:cover;}
.member-row .m-avatar span{font-size:16px;font-weight:600;color:var(--coral-deep);}
.member-row .m-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.member-row .m-name{font-size:14px;font-weight:500;color:var(--ink);line-height:20px;
  display:flex;align-items:center;gap:8px;}
.member-row .m-username{font-size:12.5px;color:var(--muted);line-height:17px;}
.member-row .m-me{font-size:11px;color:var(--muted);background:var(--field);
  border-radius:999px;padding:1px 8px;}
.member-ops{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.member-ops .op-btn{
  height:30px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:500;
  color:var(--ink-3);border:1px solid var(--line-soft);background:var(--card);
  display:inline-flex;align-items:center;gap:4px;
  transition:border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}
.member-ops .op-btn:hover{border-color:var(--ghost-hover-border);background:var(--ghost-hover-bg);}
.member-ops .op-del{
  width:30px;padding:0;justify-content:center;color:var(--muted);
}
.member-ops .op-del:hover{color:var(--danger);border-color:var(--danger);}

/* 角色单选 chip（添加成员时） */
.role-chips{display:flex;gap:10px;}
.role-chip{
  flex:1 1 0;height:40px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line-soft);background:var(--field);
  font-size:13px;font-weight:500;color:var(--muted-2);
  transition:border-color .18s ease,background-color .18s ease;
}
.role-chip:hover{background:var(--chip-hover);}
.role-chip.is-active{background:var(--coral-soft);border-color:var(--coral);color:var(--coral-deep);}

/* 成员弹窗分区标题 */
.member-sec-title{font-size:12.5px;font-weight:500;color:var(--label);line-height:17px;
  letter-spacing:1px;}

/* ---------- 字数计数（愿望弹窗，12px --faded 行内） ---------- */
.char-count{display:flex;justify-content:flex-end;font-size:12px;color:var(--faded);line-height:16px;}

/* ---------- 添加成员已选用户条 ---------- */
.member-picked{
  display:flex;align-items:center;gap:10px;height:48px;padding:0 12px;
  border-radius:var(--radius-sm);background:var(--field);
}
.member-picked .m-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;
  background:var(--avatar-bg);flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.member-picked .m-avatar img{width:100%;height:100%;object-fit:cover;}
.member-picked .m-avatar span{font-size:13px;font-weight:600;color:var(--coral-deep);}
.member-picked .m-name{font-size:13.5px;font-weight:500;color:var(--ink);flex:1 1 auto;}
.member-picked button{color:var(--muted);display:flex;align-items:center;padding:4px;}
.member-picked button:hover{color:var(--danger);}

/* ---------- 首页区块通用空状态容器 ---------- */
.card-empty{flex:1 1 auto;display:flex;align-items:center;justify-content:center;width:100%;}

/* ---------- 只读成员隐藏全部写入口（AC-09） ---------- */
.is-viewer [data-admin-only]{display:none !important;}

/* ---------- 页面入场（卡片 stagger 80ms，reduced-motion 由 tokens 收敛） ---------- */
.page .card,.page .kidwiki-bar,.page .topbar{
  animation:kdFadeUp .4s ease-out both;
}
.page .topbar{animation-delay:0ms;}
.page .row:nth-child(1) .card:nth-child(1){animation-delay:40ms;}
.page .row:nth-child(1) .card:nth-child(2){animation-delay:80ms;}
.page .row:nth-child(1) .card:nth-child(3){animation-delay:120ms;}
.page .row:nth-child(2) .card:nth-child(1){animation-delay:160ms;}
.page .row:nth-child(2) .card:nth-child(2){animation-delay:200ms;}
.page .row:nth-child(2) .card:nth-child(3){animation-delay:240ms;}
.page .kidwiki-bar{animation-delay:280ms;}
@keyframes kdFadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}