/* ============================================================
   east-saibo 视觉重构 · Wave 1 社区域（ds-social）
   覆盖范围：步骤 06 看一看/关注/消息 + 步骤 07 成员图鉴/个人主页/排行榜
   约束：只做视觉；不写业务；全部颜色/圆角/阴影走 tokens.css 的 --ds-* 变量；
   不触碰 styles.css 公共段与聚会详情领奖台选择器（该口径归 ds-gather）。
   ============================================================ */

/* ---------- 步骤 06 · 帖子卡（postCard） ---------- */
.post-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
  padding: var(--ds-space-4) var(--ds-space-5);
}
.post-card.is-focused { box-shadow: var(--ds-focus-ring); }

.post-author { gap: var(--ds-space-2); color: var(--ds-text-tertiary); }
.post-author b { color: var(--ds-ink); font-weight: 600; max-width: 160px; }
.post-author time, .post-author .p-edit { color: var(--ds-text-tertiary); }
.post-author .pill.plain { color: var(--ds-text-secondary); }
button.author-link:hover b { color: var(--ds-brand); }

.post-text { font-size: 14.5px; line-height: var(--ds-leading-body); color: var(--ds-ink); }
.post-expand { color: var(--ds-brand); }

.post-actions { gap: var(--ds-space-1); padding-top: var(--ds-space-2); border-top: 1px solid var(--ds-border); }
.post-actions .act {
  min-height: var(--ds-touch-target);
  border-radius: 12px;
  color: var(--ds-text-secondary);
}
.post-actions .act:hover { background: var(--ds-surface-soft); color: var(--ds-ink); }
.post-actions .act.on { color: var(--ds-brand); background: var(--ds-brand-soft); font-weight: 600; }
.post-actions .act.right { margin-left: auto; }

/* 媒体宫格：保持 1/2/3/4/9 的既有规则，只换圆角与底色 */
.media-grid { gap: 6px; }
.media-grid .cell { border-radius: 14px; background: var(--ds-surface-soft); }
.media-grid .more-n { background: rgba(26, 26, 26, .38); }

/* 状态条：已发=朱砂浅底，未发=灰白中性 */
.status-strip {
  background: var(--ds-brand-soft);
  border: 1px solid rgba(154, 42, 42, .12);
  border-radius: 14px;
  color: var(--ds-brand);
}
.status-strip .dot { background: var(--ds-brand); }
.status-strip.idle {
  background: var(--ds-surface-soft);
  border: 1px solid var(--ds-border);
  color: var(--ds-text-secondary);
}

/* ---------- 步骤 06 · 关注页 / 消息页列表行 ---------- */
.me-row {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  box-shadow: var(--ds-shadow-card);
  min-height: 56px;
  color: var(--ds-ink);
}
button.me-row:hover, .msg-row[data-action]:hover { border-color: rgba(154, 42, 42, .28); }
.me-row small { color: var(--ds-text-secondary); }
.me-row .arrow-ico { color: var(--ds-text-tertiary); }

.msg-row {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  box-shadow: var(--ds-shadow-card);
  min-height: 52px;
}
/* 未读：左侧朱砂条 + 加粗双通道传达，不单靠颜色 */
.msg-row.unread { border-left: 3px solid var(--ds-brand); }
.msg-row.unread .msg-text { font-weight: 650; color: var(--ds-ink); }
.msg-text { color: var(--ds-ink); }
.msg-copy small { color: var(--ds-text-tertiary); }
.msg-avatar-ph { background: var(--ds-surface-soft); border: 1px solid var(--ds-border); }

/* ---------- 步骤 07 · 成员图鉴 ---------- */
.member-head .count { color: var(--ds-text-secondary); font-weight: 600; }
.member-tab, .rank-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch-target);
  color: var(--ds-text-secondary);
}
.member-tab.active, .rank-tab.active { color: var(--ds-ink); }
.member-tab.active::after, .rank-tab.active::after { background: var(--ds-brand); }

.member-grid { gap: 12px; }
.member-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  box-shadow: var(--ds-shadow-card);
  padding: 14px 8px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.member-card:hover { border-color: rgba(154, 42, 42, .3); box-shadow: var(--ds-shadow-floating); }
.member-card:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.member-card .avatar { border-color: var(--ds-surface); }
.member-card b { font-size: 13px; color: var(--ds-ink); }
.member-card .muted { color: var(--ds-text-secondary); }
.member-who { color: var(--ds-text-tertiary); }
/* 虚拟成员：浅底 + 文案小标区分（不做冒犯性标识） */
.member-card.virtual { background: var(--ds-surface-soft); }

/* ---------- 步骤 07 · 排行榜 ---------- */
.rank-list {
  margin-top: 10px;
  padding: 2px 14px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  box-shadow: var(--ds-shadow-card);
}
.rank-row { color: var(--ds-ink); border-top: 1px solid var(--ds-border); }
.rank-list .rank-row:first-child { border-top: 0; }
button.rank-row:hover { background: var(--ds-surface-soft); }
.rank-num { color: var(--ds-text-tertiary); font-weight: 600; }
.rank-who { color: var(--ds-text-tertiary); }
.rank-value { color: var(--ds-ink); }

.rank-ml {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  box-shadow: var(--ds-shadow-card);
}
.rank-ml-head b { color: var(--ds-ink); }
.rank-ml .rank-num { color: var(--ds-brand); }

/* 前三领奖台：结构不变，仅配色/圆角/层级 */
.podium { gap: 12px; }
.podium-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}
.podium-card b { color: var(--ds-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-card.rank-1 { border-color: rgba(154, 42, 42, .45); box-shadow: 0 8px 20px rgba(154, 42, 42, .12); }
.podium-card.rank-2 { border-color: var(--ds-border); }
.podium-card.rank-3 { border-color: var(--ds-border); }
.podium-medal { background: var(--ds-brand); }
.podium-card.rank-2 .podium-medal { background: var(--ds-text-tertiary); }
.podium-card.rank-3 .podium-medal { background: var(--ds-bronze); }
.podium-value { color: var(--ds-ink); }
.podium-card.rank-1 .podium-value { color: var(--ds-brand); }

.my-rank {
  background: var(--ds-brand-soft);
  border: 1px solid rgba(154, 42, 42, .14);
  border-radius: 14px;
  color: var(--ds-ink);
}
.my-rank b { color: var(--ds-brand); }
.my-rank .muted { color: var(--ds-text-secondary); }

/* ---------- 步骤 07 · 个人主页 ---------- */
/* 头图：青铜绿深底 + 白色装饰光斑；hero-safe 56px 安全区与 80px 头像口径不变 */
.person-hero {
  color: #fff;
  background: linear-gradient(135deg, var(--ds-bronze) 0%, #3A4B3E 100%);
}
.person-hero::before { background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .14), transparent 62%); }
.person-hero::after { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .08), transparent 60%); }
.hero-id .avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, .82), 0 8px 20px rgba(0, 0, 0, .25); }
.hero-chip { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); }
.hero-action .btn.primary { color: var(--ds-brand); }

.person-sheet {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-floating);
}
.person-quote { color: var(--ds-ink); border-bottom: 1px dashed var(--ds-border); }
.person-metric b { color: var(--ds-brand); }
.person-metric span { color: var(--ds-text-secondary); }

.kv-list {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  box-shadow: var(--ds-shadow-card);
}
.kv-row { border-top: 1px solid var(--ds-border); }
.kv-row b { color: var(--ds-ink); }
.kv-tag { color: var(--ds-success); background: var(--ds-bronze-soft); }

/* 日历（系统统计，文案口径不变，仅换强调色） */
.person-cal-head b { color: var(--ds-ink); }
.month-grid .weekday { color: var(--ds-text-tertiary); }
.calendar-day.has { background: var(--ds-brand-soft); color: var(--ds-brand); }
.calendar-day .tick { color: var(--ds-brand); }

/* 近 30 天折线：朱砂主线 */
.line-path { stroke: var(--ds-brand); }
.line-area { fill: var(--ds-brand); }
.line-chart circle { fill: var(--ds-brand); }
.line-axis, .line-labels { color: var(--ds-text-secondary); }

/* 空态图形统一走青铜绿浅底 */
.empty .empty-art { background: var(--ds-bronze-soft); color: var(--ds-bronze); }

/* ---------- 可达性与动态 ---------- */
.member-card, .post-actions .act, button.rank-row { transition-duration: .15s; }
@media (prefers-reduced-motion: reduce) {
  .member-card, .post-actions .act, button.rank-row { transition: none; }
}