/*! ui/form.css —— 表单字段、双历行、勾选、标签小件 */
/* ---------- 表单 ---------- */
.field { margin-bottom: 15px; }
.field.last { margin-bottom: 0; }

.field > label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.field .hint { font-size: 11px; color: var(--ink-3); margin-top: 6px; line-height: 1.6; }
/* 固定说明（不随输入变色的那一条），与实时提示区分开 */
.field .hint.static { margin-top: 3px; opacity: .85; }

/* 「自动推算」这类标记：说明这个值不是填的，是算出来的 */
.auto-tag {
  font-style: normal;
  font-size: 10.5px;
  color: var(--ink-3);
  margin-left: 7px;
}

input[type=text], input[type=date], select, textarea {
  width: 100%;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--rail-2);
  border-radius: var(--r-ctrl);
  font-size: 13px;
  background: var(--card);
  color: var(--ink);
  transition: border-color .16s, box-shadow .16s;
}

textarea { height: auto; padding: 9px 11px; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }

input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* 日期行：公历、农历并排，任一侧输入另一侧自动换算。
 * 用 grid 而不是 flex：「闰月」勾选框必须拿到自己的固有宽度，
 * 否则会被两个输入框挤成竖排的一个字一行。 */
.dual {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}
.dual .cal-tag { font-size: 11px; color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; }
.dual input { width: 100%; min-width: 0; }
.dual .chk { margin-top: 0; white-space: nowrap; }

/* 窄屏：公历、农历各占一行，闰月自己一行 */
@media (max-width: 620px) {
  .dual { grid-template-columns: auto minmax(0, 1fr); }
  .dual .chk { grid-column: 1 / -1; }
}

.chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  margin-top: 8px;
}

.chk input { accent-color: var(--blue); margin: 0; }

/* 表单顶部的关系预设说明 */
.preset-note {
  display: block;
  background: var(--blue-bg);
  color: var(--blue);
  border-radius: var(--r-ctrl);
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.preset-note b { font-weight: 600; }

/* 配偶小片：一个在婚 / 已离婚的配偶 = 一张小片。
 * 小片里除了姓名，还有「离婚 / 复婚」与「× 删除」两个动作，
 * 离婚后多出一个「结束年份」单框 —— 离婚只是翻状态，人不从谱里消失。
 * 容器用 flex + wrap：小片内容一律不换行（nowrap），放不下就整片换到下一行，
 * 不能把「前妻」两个字挤成竖排。 */
#f_spouse_list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 1px solid var(--rail-2);
  background: var(--card);
  border-radius: var(--r-tag);
  padding: 3px 6px 3px 10px;
  font-size: 12px;
  color: var(--ink-2);
  transition: border-color .16s, color .16s;
}

.chip.divorced { border-style: dashed; color: var(--ink-3); }
/* 情侣与未婚（定亲）都是关系的常态，不是异常 —— 用蓝，且不加「存疑」那类朱笔 */
.chip.partner,
.chip.engaged { border-style: dotted; color: var(--blue); }

/* 片内 / 新增区的关系下拉（已婚 / 情侣 / 离婚） */
.chip-rel {
  width: 72px;
  padding: 1px 2px;
  border: 1px solid var(--rail-2);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 11px;
}

.chip-end {
  width: 70px;
  padding: 2px 4px;
  border: 1px solid var(--rail-2);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 11px;
}

.chip-act {
  border: 0;
  background: none;
  padding: 0 2px;
  font: inherit;
  font-size: 12px;
  color: var(--ink-3);
  cursor: pointer;
}

.chip-act:hover { color: var(--rubric); }

/* 新增婚恋：先选人（宽）、再选关系（定宽） */
#f_spouse_add {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

#f_spouse_add > select:first-child { flex: 1; min-width: 0; }
/* 新增区的关系下拉要与旁边的「选人」下拉同高，所以不吃 .chip-rel 的小号字 */
#f_spouse_add > .chip-rel {
  flex: 0 0 88px;
  width: auto;
  font-size: inherit;
  padding: 2px 4px;
}

.spouse-none { font-size: 12px; color: var(--ink-3); }

/* 本人婚恋状况那一行：与配偶小片同一行高，但它是「一句话 + 一个下拉」，
 * 不是一条关系记录 —— 所以不给 chip 边框，只让下拉自己站住。 */
.spouse-own {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 6px;
}
.spouse-own.hidden { display: none; }
.spouse-own .spouse-none { flex: 0 0 auto; }