/* ==========================================================================
   登记异常那一层的样式。

   只写这一层真正独有的东西 —— 表单的骨架（.field / .field-label / .input）
   都在 base.css 里，抽屉外壳在 overlay.css 里，都不重复。
   独有的其实只有一样：四类的单选组，因为每一项要带一句说明，
   原生 radio 摆不出这个形状。

   单独一个文件而不是并进 admin.css：那份已经 389 行，逼近 400 的硬上限，
   而登记异常和用户管理没有任何共享状态。
   ========================================================================== */

/* 四类的单选组。竖排而不是横排：每一项带一句说明，横排会挤成两行
   还对不齐，而说明恰恰是这组存在的理由 —— 「单方变更」和「违约」
   业务员分不清，选错会让后面的处理建议跑偏。 */
.xn-kinds {
  display: grid;
  gap: 6px;
}

.xn-kind {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 8px;
  padding: 8px 10px;
  border: 1px solid var(--line-s);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}

.xn-kind:hover { border-color: var(--line); }

/* 选中态给一条铜色左边框而不是填色底：填色会让说明文字的对比度掉下去，
   而说明是这一组最需要读清的部分。 */
.xn-kind:has(input:checked) {
  border-color: var(--brass);
  background: var(--surface-2);
}

.xn-kind input { margin: 0; accent-color: var(--brass); }

.xn-kind-name {
  font-size: var(--fs-sm);
  color: var(--ink);
}

/* 说明跨到第二列的下一行，和类型名左对齐 —— 缩进到 radio 右边，
   读起来是「这一类是什么」而不是另起一句无关的话。 */
.xn-kind-hint {
  grid-column: 2;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink3);
}

/* 多行输入。base.css 的 .input 是单行高度，textarea 要放开。 */
.xn-area {
  min-height: 76px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.7;
}

/* 两列并排的字段（姓名/部门、工龄/月薪）。这几对信息成对读才有意义，
   竖着排会让表单长到看不见提交按钮。窄屏退回单列。 */
.xn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.xn-row .field { margin-bottom: 0; }
@media (max-width: 560px) {
  .xn-row { grid-template-columns: 1fr; }
}