/* 设置页 →「个人资料」选项卡的补充样式
 *
 * 基础组件（`.card` / `.field` / `.input` / `.textarea` / `.note`）都在 `app.css`，
 * 这里只放**这一页特有**的三处。别在这里重定义通用组件 —— 那是漂移的开始。
 */

/* ① 头像位放 `<img>` 时撑满并裁切。
   `.account-id__avatar` 是 48px 圆形、flex 居中（app.css），
   图片若不自撑会被压成原始尺寸、方角溢出在圆底上。 */
.account-id__avatar > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* ② 表单被锁住时（★ 读取失败）要看得出来"现在不能改"。
   ⚠️ 只做视觉弱化，**绝不隐藏任何字段** ——
   读不到的时候恰恰要让咨询师看到"资料在这儿、只是暂时读不出来"，
   藏起来就变成"这块不存在"，那是另一种误读（而且比空白表单更糟：他连重试按钮在哪都不知道）。
   作用域限定在本面板，不影响其它页面的 disabled 控件。 */
[data-panel="profile"] .input:disabled,
[data-panel="profile"] .textarea:disabled {
  background: var(--surface-2);
  color: var(--ink-500);
  cursor: not-allowed;
}

/* ③ 底部那排「保存资料 / 放弃改动 / 状态文字」。
   `.page__actions` 是给页面级按钮用的（右对齐 + 上边距），
   这里借它的排布但状态文字要能占满剩余宽度、不与按钮同权重。 */
[data-panel="profile"] .page__actions {
  flex-wrap: wrap;
  gap: var(--space-3);
}

[data-panel="profile"] [data-cp-status] {
  flex: 1 1 auto;
  min-width: 8em;
  text-align: right;
}