/* ---
 * generated_by: kimi-k2.8 (Track C2 合盘页前端)
 * date: 2026-09-17
 * core_logic: #page-friend-compare 合盘页（双方 Big Three 面板 / 跨盘相位 facts 行 /
 *   overlays 区 / Crush 报告 CTA 行 + 页级状态块）。视觉令牌全取 styles/tokens.css
 *   （纸墨/苔绿/陶锈），与全站 D26 语言一致；触控目标 ≥44px；:focus-visible 指示；
 *   本页零 transition/animation（reduced-motion 下行为无差异）；390/1280 双断点。
 *   #/custom C3、#/crush C4、#/couple C5 均已换正式页，pageSoon* 占位键全语退役，
 *   本批起壳层内不再有静态占位页。
 * recent_changes:
 *   - 2026-09-17: 终审修复——注释改为现状陈述（占位页时代结束），零规则改动。
 * --- */

/* === #page-friend-compare === */
#page-friend-compare .compare-with {
  margin: var(--reflect-space-16, 16px) 0 0;
  font-family: var(--reflect-serif);
  font-size: 20px;
  line-height: 28px;
  color: var(--reflect-ink);
}

#page-friend-compare .compare-with strong {
  font-weight: 700;
}

/* 页级状态块（safe/guest/loading/unavailable/rate-limited/error/gone）：纵向排列 + 触控目标 */
#page-friend-compare [data-compare-state] {
  margin-top: var(--reflect-space-16, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-12, 12px);
  align-items: flex-start;
}

#page-friend-compare [data-compare-state] .section-h,
#page-friend-compare [data-compare-state] .body-p {
  margin: 0;
}

/* head 内联 flex 类会压过 UA [hidden]，状态块需作者级赢回（同既有先例） */
#page-friend-compare [data-compare-state][hidden],
#page-friend-compare #compare-app[hidden],
#page-friend-compare #compare-self-block[hidden],
#page-friend-compare #compare-overlays[hidden],
#page-friend-compare #compare-aspects-empty[hidden] {
  display: none !important;
}

/* ready 应用区：双方 Big Three 面板 */
#page-friend-compare #compare-app {
  margin-top: var(--reflect-space-16, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-12, 12px);
}

#page-friend-compare .compare-panel {
  padding: var(--reflect-space-16, 16px);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md, 8px);
  background: var(--reflect-paper-light);
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-8, 8px);
}

#page-friend-compare .compare-panel .section-h {
  margin: 0;
}

#page-friend-compare .compare-three {
  margin: 0;
  font-family: var(--reflect-sans);
  font-size: 14px;
  line-height: 21px;
  color: var(--reflect-ink);
}

/* 相位 / overlay facts 行：事实命名，mono 呈现 */
#page-friend-compare .compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-8, 8px);
}

#page-friend-compare .compare-aspect {
  font-family: var(--reflect-mono, monospace);
  font-size: 13px;
  line-height: 19px;
  color: var(--reflect-ink);
  padding: var(--reflect-space-8, 8px) var(--reflect-space-12, 12px);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md, 8px);
  background: var(--reflect-paper-light);
}

#page-friend-compare .compare-empty {
  margin: 0;
  font-family: var(--reflect-sans);
  font-size: 14px;
  color: var(--reflect-ink-soft);
}

/* Crush 报告 CTA 行 */
#page-friend-compare .compare-actions {
  margin-top: var(--reflect-space-12, 12px);
}

#page-friend-compare .compare-actions .btn-primary,
#page-friend-compare [data-compare-state] .btn-primary,
#page-friend-compare [data-compare-state] .btn-ghost {
  min-height: 44px; /* 触控目标 */
}

#page-friend-compare .btn-primary:focus-visible,
#page-friend-compare .btn-ghost:focus-visible {
  outline: 2px solid var(--reflect-moss);
  outline-offset: 2px;
}

/* 390 窄屏：面板内边距收紧 */
@media (max-width: 390px) {
  #page-friend-compare .compare-panel {
    padding: var(--reflect-space-12, 12px);
  }
}

/* 1280 宽屏：面板与 facts 列限阅读列宽 */
@media (min-width: 1280px) {
  #page-friend-compare .compare-panel,
  #page-friend-compare .compare-list {
    max-width: 640px;
  }
}