/*
 * 建档表单（PRD 5.1）的样式。
 *
 * 为什么单独一个文件、而且全部只认 .pf-* 类名：
 *   1. profile.js 是**自己**建整棵 DOM 的（第二级选择、混血多选、自定义逃生舱都是动态生成的），
 *      这些元素在 index.html 里根本不存在，样式只能跟着模块走；
 *   2. index.html / styles.css 由别人同时在改，所以这里绝不写 `#xxx` 或
 *      `.card > div:nth-child(2)` 这类跟结构绑死的选择器——只认类名，谁改结构都不会把这里改坏；
 *   3. 颜色一律引用 styles.css 里已有的 CSS 变量（--brand / --ink / --line / --bad / --good…），
 *      避免第二套色值：品牌色改一次，建档页跟着改。
 *
 * 「默认折叠」是刻意的：混血多选、自定义输入框、建议 chip、逐条提示都是**按需出现**的。
 * 建档页一上来就把所有入口摊开，用户会以为每一项都要填；按需展开才符合「不知道就不填」的兜底。
 */

:root {
  /* 建档页自己的两个尺寸，故意不用通用变量：chip 的触控高度是组件级决定 */
  --pf-chip-h: 38px;                   /* 手指能稳点的高度下限 */
  --pf-radius: 12px;
}

/* --------------------------------------------------------------------------
 * 表单骨架
 * -------------------------------------------------------------------------- */

.pf-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pf-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;                        /* 允许输入框在窄屏里收缩，否则会把卡片撑破 */
}

.pf-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--warm-brown);
}

.pf-hint,
.pf-message,
.pf-notice,
.pf-primary,
.pf-suggest-title {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--warm-gray);
}

/* 提示可能是长句（比如自定义品种的待审说明），别让它把行高撑得太紧 */
.pf-message:empty,
.pf-hint:empty,
.pf-notice:empty,
.pf-primary:empty,
.pf-suggest-title:empty {
  display: none;                       /* 空文案不占位，否则表单会莫名多出空白 */
}

.pf-message.is-good { color: var(--good, #1E7A46); }
.pf-message.is-bad  { color: var(--bad, #C0392B); }

/* 常驻提示（逃生舱说明 / 改档归属说明）：比普通 hint 更显眼一点，因为它们是"必读" */
.pf-notice {
  padding: 8px 10px;
  border-radius: 10px;
  background: #F6EFE8;
  border: 1px solid var(--line);
  color: var(--warm-brown);
}
.pf-notice.is-good { background: #EAF6EE; border-color: #C9E6D3; color: var(--good, #1E7A46); }
.pf-notice.is-warn { background: #FDF3E3; border-color: #F0D9AE; color: #8A5A22; }

/* --------------------------------------------------------------------------
 * chip（大类 / 性别 / 混血倾向 / 建议）
 * 四种 chip 共用一套外观：它们都是"点一下就选一个值"，长得不一样只会让人以为行为不一样。
 * -------------------------------------------------------------------------- */

.pf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pf-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pf-chip-h);
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--chip, #F6EFE8);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 选中态同时用描边 + 底色 + 字重三重反馈：只改颜色的话，色弱用户看不出选没选 */
.pf-chip.is-on {
  border-color: var(--brand-deep);
  background: var(--brand);
  color: #FDF8F1;
  font-weight: 600;
}

.pf-chip:disabled {
  opacity: .45;
  cursor: not-allowed;                 /* 混血倾向满 MAX_MIX 个之后剩下的就是这种 */
}

/* 键盘用户必须看得见焦点，否则这个表单等于只能点 */
.pf-chip:focus-visible,
.pf-btn:focus-visible,
.pf-link:focus-visible,
.pf-input:focus-visible,
.pf-select:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * 下拉与输入框
 * -------------------------------------------------------------------------- */

.pf-select,
.pf-input {
  width: 100%;
  min-height: var(--pf-chip-h);
  padding: 8px 10px;
  border-radius: var(--pf-radius);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  /* iOS 上字号小于 16px 会在聚焦时自动放大整个页面，把布局顶歪 */
  -webkit-text-size-adjust: 100%;
}

.pf-select { font-size: 15px; }

/* --------------------------------------------------------------------------
 * 混血开关与品种倾向多选
 * -------------------------------------------------------------------------- */

.pf-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--pf-chip-h);
  cursor: pointer;
}

.pf-toggle {
  width: 20px;
  height: 20px;
  accent-color: var(--brand-deep);     /* 用品牌色，避免原生蓝跟整体色调打架 */
  flex: none;
}

.pf-toggle-label {
  font-size: 14px;
  color: var(--ink);
}

/* 混血区默认收起：没点开关时它是空的，不该占视觉重量 */
.pf-mix {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: var(--pf-radius);
  background: #FBF6F0;
  border: 1px dashed var(--line);
}
.pf-mix.is-open { display: flex; }

/* 主品种那句话要显眼：它是"顺序即主品种"这条规则唯一的可见证据 */
.pf-primary.is-open {
  padding: 6px 8px;
  border-radius: 8px;
  background: #F3E3D2;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
 * 自定义品种（逃生舱）
 * -------------------------------------------------------------------------- */

.pf-link {
  align-self: flex-start;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--brand-deep);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* 混血时隐藏"我自己写"入口：混血倾向走的是同一组预设 chip，两个入口同时出现只会让人犹豫。
   注意两个选择器权重相同（都是两个类），所以这一条必须放在 .pf-link 之后才生效。 */
.pf-link.is-hidden { display: none; }

.pf-custom {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--pf-radius);
  border: 1px solid var(--line);
  background: #FBF6F0;
}
.pf-custom.is-open { display: flex; }

.pf-custom-field { display: flex; flex-direction: column; gap: 6px; }

/* 建议区与"都不是"按钮默认收起：接口没回来之前不该出现可点的东西 */
.pf-suggest-title { display: none; }
.pf-suggest-title.is-open { display: block; color: var(--ink); font-size: 13px; }

.pf-chips:empty { display: none; }

/* 建议 chip 与普通 chip 区分开：点它是"用别人的词"，不是"新建一个词" */
.pf-suggest {
  background: #fff;
  border-style: dashed;
  border-color: var(--brand);
  color: var(--brand-deep);
}

.pf-btn {
  align-self: flex-start;
  min-height: var(--pf-chip-h);
  padding: 0 16px;
  border-radius: var(--pf-radius);
  border: 1px solid var(--brand-deep);
  background: var(--brand);
  color: #FDF8F1;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* JS 用 .is-open 控制"该不该出现"；disabled 只是双保险（例如请求还没回来时） */
.pf-btn:not(.is-open) { display: none; }
.pf-btn:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
 * 窄屏与可访问性
 * -------------------------------------------------------------------------- */

@media (max-width: 380px) {
  .pf-chip { padding: 0 10px; font-size: 13px; }   /* 小屏上一行放得下三个大类/性别 chip */
}

@media (prefers-reduced-motion: reduce) {
  /* 本文件没有动画；留着这条是给以后加过渡时的提醒：
     过渡可以有，但"减弱动态效果"打开时必须全部关掉 */
  .pf-chip,
  .pf-btn { transition: none; }
}