/* client-profile.css — 来访档案页（client-profile.html）专有样式
 *
 * 只放这一页独有的东西：三态条、头部信息卡、可就地编辑的字段栏、
 * 时间轴事件行、趋势色。通用组件（.card / .kv / .rows / .timeline / .badge）
 * 一律复用 app.css，不在这里复制一份 —— 复制出来的样式迟早跟原件漂移。
 *
 * ⚠️ 本项目已经三次栽在「inline-flex / flex 把 [hidden] 盖掉」上，
 *    这里每一个新的 flex 容器都配了一条显式的 [hidden] 兜底。
 */

/* ---------------------------------------------------------------- 三态 */

.cp-state {
  display: flex;
  justify-content: center;
  padding: var(--space-10) var(--space-4);
}
.cp-state[hidden] { display: none; }

.cp-state__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 460px;
  text-align: center;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cp-state__icon { color: var(--ink-500); display: inline-flex; }

.cp-state__msg {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-700);
}

/* 出错态用一点风险色做区分 —— 但只在图标上，不整块染红 */
.cp-state.is-error .cp-state__icon { color: var(--risk); }

/* ------------------------------------------------------- 头部信息卡 */

.cp-head__body {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.cp-head__ident {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  min-width: 280px;
  flex: 1 1 420px;
}

.cp-head__avatar {
  width: 52px;
  height: 52px;
  font-size: var(--text-base);
  flex: 0 0 auto;
}

.cp-head__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.cp-head__name {
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  color: var(--ink-900);
  line-height: 1.3;
  word-break: break-word;
}

/* 头部这四条信息是并排的短字段，两列比一列省一半高度。
   ⚠️ minmax(0,1fr)：不加的话长邮箱会把网格撑破（1fr 的默认 min-width 是 auto）。 */
.cp-head__kv {
  grid-template-columns: 68px minmax(0, 1fr);
}

.cp-head__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-end;
}

/* ---------------------------------------------------- 策略卡的保存行 */

.cp-save {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.cp-save[hidden] { display: none; }

/* 失败提示占满左侧、右对齐的保存按钮留在原位 —— 出错时按钮不会跳走 */
.cp-save__hint {
  flex: 1 1 auto;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--risk);
  text-align: right;
}
.cp-save__hint:empty { display: none; }

.cp-hint {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--ink-500);
}
.cp-hint[hidden] { display: none; }

/* ------------------------------------------------------- 基本信息字段 */

/* 标签列比默认的 104px 宽一档：「职业 / 学习状态」「主要困扰 / 求助议题」
   这类标签在 104px 下会折行，而折行的标签会让整张表看起来错位。 */
.cp-fields .kv {
  grid-template-columns: 132px minmax(0, 1fr);
}

/* 分组之间用 section-title 分隔，不再额外画线（app.css 里已有节奏） */
.cp-group + .cp-group { margin-top: var(--space-5); }

.cp-group__note {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--ink-500);
  line-height: 1.55;
}

/* 值单元格。可编辑的那些给一个"能点"的暗示：hover 出现浅底与描边。
   不做常驻的下划虚线 —— 41 行全挂着虚线会像表单，而不是档案。 */
.cp-val {
  display: block;
  min-height: 2.6em;              /* 与整档行高对齐，避免单击时整行跳动 */
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: pre-wrap;          /* longtext 里的换行要保留 */
  word-break: break-word;
}
.cp-val[data-cp-empty="1"] { color: var(--ink-300); }

.cp-val[data-cp-editable="1"] { cursor: text; }
.cp-val[data-cp-editable="1"]:hover {
  background: var(--anlan-blue-50);
  border-color: var(--anlan-blue-100);
}
.cp-val[data-cp-editable="1"]:focus-visible {
  outline: 2px solid var(--anlan-blue);
  outline-offset: 1px;
}

/* 有两个版本（括号合并）的字段：加一个可点的角标说明，而不是只靠括号 ——
   括号像排版，角标才像"待处理"。title 里带完整旧值。 */
.cp-conflict {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-2);
  padding: 0 6px;
  height: 18px;
  font-size: 11px;
  border-radius: 999px;
  background: var(--amber-50);
  color: var(--amber-600);
  vertical-align: middle;
}
.cp-conflict[hidden] { display: none; }

/* 就地编辑时的控件：撑满单元格，字号与展示态一致（不然一进入编辑
   整行会"跳"一下，长时间编辑很累） */
.cp-editor {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--anlan-blue);
  border-radius: 6px;
  padding: 4px 6px;
  margin: -2px -6px;
}
textarea.cp-editor { min-height: 4.5em; resize: vertical; }
.cp-val.is-saving { opacity: .55; }

/* 脱敏值 + 「显示」按钮：号码默认不完整显示，点一下才展开。 */
.cp-mask-btn {
  margin-left: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-xs);
  color: var(--anlan-blue);
  cursor: pointer;
  text-decoration: underline;
}
.cp-mask-btn:hover { color: var(--anlan-blue-600); }

/* ---------------------------------------------------------------- 时间轴 */

/* 复用 app.css 的 .timeline / .timeline__* 结构，只补这里多出来的两件东西：
   事件头的「字段数」角标、展开体里的字段清单。 */
.cp-ev__count {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-500);
  font-size: 11px;
}

.cp-ev__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-2);
}

.cp-ev__row {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--ink-700);
}

.cp-ev__key {
  flex: 0 0 132px;
  color: var(--ink-500);
}

.cp-ev__val {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.cp-ev__val[data-cp-empty="1"] { color: var(--ink-300); }

.cp-more {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-500);
}
.cp-more[hidden] { display: none; }

/* ------------------------------------------------------------ 风险指数 */

.cp-risk {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.cp-risk[hidden] { display: none; }

/* ⚠️ 不复用 app.css 的 .trend--up / .trend--down：那两个类名指的是**箭头方向**，
   而风险这里要表达的是「变好 / 变差」。沿用它们会让下一处改动把颜色改反。
   颜色按中国习惯：风险上升 = 红（与股票涨红同源，都是"要注意"）。 */
.cp-trend { font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 4px; }
.cp-trend--worse { color: var(--risk); }
.cp-trend--better { color: var(--ok); }
.cp-trend--same { color: var(--ink-500); }
.cp-trend[hidden] { display: none; }

/* --------------------------------------------------------------- 窄屏 */

@media (max-width: 900px) {
  .cp-head__kv { grid-template-columns: 88px minmax(0, 1fr); }
  .cp-fields .kv { grid-template-columns: 110px minmax(0, 1fr); }
  .cp-ev__key { flex-basis: 96px; }
}