/* ===========================
   forms.css — 基础表单控件视觉
   =========================== */

/* --- Form Field --- */
.form-field {
  display: grid;
  gap: var(--gap-4);
}

.form-field--inline {
  display: flex;
  align-items: center;
  gap: var(--gap-8);
}

.form-field--compact {
  gap: var(--gap-2);
}

/* --- Form Label --- */
.form-label {
  display: block;
  color: var(--color-text-soft);
  font-size: var(--font-9);
  font-weight: 500;
  line-height: 1;
  /* 全站设计稿字段标签统一字距 0.036em（原各页分散声明上提） */
  letter-spacing: 0.036em;
}

/* --- Form Help --- */
.form-help {
  display: block;
  color: var(--color-text-dim);
  font-size: var(--font-9);
  line-height: 1;
}

/* --- Text Input ---
   基类不定高：高度由尺寸修饰类（--lg）或页面级覆盖提供，
   各页面按需调整，避免基类与页面样式冲突。
   描边全站统一走 inset 阴影机制（不占盒模型、纯色填充路径），交互变色逻辑不变；
   display: block 消除 inline 行盒 strut 对父容器高度的撑高（replaced 元素基线以下 descent 溢出）。 */
.form-input {
  display: block;
  width: 100%;
  border: 0;
  box-shadow: inset 0 0 0 calc(1px * var(--ui-scale)) var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--color-bg);
  padding: 0 var(--gap-10);
  color: var(--color-text);
  font-size: var(--font-10);
  letter-spacing: 0.022em;
}

.form-input:focus {
  box-shadow: inset 0 0 0 calc(1px * var(--ui-scale)) var(--color-primary);
}

/* :focus-visible 双胞胎退役：文本框任何聚焦方式必同时命中两伪类（规范钦定），
   select 鼠标聚焦只命中 :focus——留 :focus 即全覆盖（浏览器底线已被 :has() 抬高） */

/* 悬停描边为收起态之上的弱增量（--color-border-hover）：text-dim（20% 白）过亮、
   border 同值无反馈；聚焦抑制只判 :focus（focus-visible 必伴随 :focus，双判冗余） */
.form-input:hover:not(:focus):not(.input-validation-error) {
  box-shadow: inset 0 0 0 calc(1px * var(--ui-scale)) var(--color-border-hover);
}

.form-input::placeholder {
  color: var(--color-text-dim);
}

.form-input:disabled {
  opacity: 0.5;
}

.form-input:read-only {
  /* 设计稿只读框（UID/时间预览/上传文件名展示）文字均为 #fff 全亮：
     变暗（0.6/0.7）无设计依据且被所有消费者反制，退役；仅保留指针语义 */
  cursor: default;
}

.form-input[type="number"]::-webkit-outer-spin-button,
.form-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* 书写在交互态之后：错误红色优先于 focus 紫色 */
.form-input.input-validation-error {
  box-shadow: inset 0 0 0 calc(1px * var(--ui-scale)) var(--color-danger);
}

/* Size modifiers */
.form-input--lg {
  height: calc(32px * var(--ui-scale));
}

/* 隐藏文本光标，用于图片链接等“聚焦全选、键盘替换”型输入框 */
.form-input--no-caret {
  caret-color: transparent;
}

/* --- 单位入框字段（原定义寄居 settings.css，被 Settings/Releases 两页复用，
   属全局组件归位迁移，规则内容不变）：值右侧「小时/秒/次」等单位 9.5px 居右内嵌 --- */
.settings-unit-field {
  position: relative;
}

.settings-unit-field .form-input {
  padding-right: calc(34px * var(--ui-scale));
}

.settings-unit-field__unit {
  position: absolute;
  top: 50%;
  right: calc(10px * var(--ui-scale));
  transform: translateY(-50%);
  color: var(--color-text-soft);
  font-size: calc(9.5px * var(--ui-scale));
  letter-spacing: 0.022em;
  pointer-events: none;
}

/* 页面级 antiforgery 令牌载体（原定义寄居 settings.css，Settings/Releases/Downloads
   等以 JSON fetch 提交的页面共用，属全局组件归位迁移，规则内容不变） */
.settings-antiforgery-form {
  display: none;
}

/* --- Select ---
   全站统一 32px 高（以认证规格为标准）；文字永不显示（transparent），
   可见形态由 combobox 触发器承担，原生框仅作表单提交/校验的数据载体。 */
.form-select {
  display: block;
  width: 100%;
  height: calc(32px * var(--ui-scale));
  border: 0;
  box-shadow: inset 0 0 0 calc(1px * var(--ui-scale)) var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
  appearance: none;
  padding: 0 calc(28px * var(--ui-scale)) 0 var(--gap-12);
  background-color: var(--color-surface-alt);
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: var(--font-10);
  line-height: calc(32px * var(--ui-scale));
  letter-spacing: 0.022em;
}

.form-select:focus {
  box-shadow: inset 0 0 0 calc(1px * var(--ui-scale)) var(--color-primary);
}

/* 紧凑档：弹窗内联系卡等 20px 行高场景（combobox 增强后由 .combobox--sm 承担可见形态） */
.form-select--sm {
  height: calc(20px * var(--ui-scale));
  padding: 0 calc(22px * var(--ui-scale)) 0 calc(8px * var(--ui-scale));
  font-size: calc(8.5px * var(--ui-scale));
  line-height: calc(20px * var(--ui-scale));
}

.form-select:hover:not(:focus):not(.input-validation-error) {
  box-shadow: inset 0 0 0 calc(1px * var(--ui-scale)) var(--color-border-hover);
}

/* 与 input 同理：错误红色优先于 focus 紫色 */
.form-select.input-validation-error {
  box-shadow: inset 0 0 0 calc(1px * var(--ui-scale)) var(--color-danger);
}

.form-select:disabled {
  opacity: 0.5;
}

/* --- Control Group --- */
.form-control-group {
  display: grid;
  align-items: stretch;
}

.form-control-group--suffix {
  grid-template-columns: 1fr auto;
  gap: calc(4px * var(--ui-scale));
}

.form-control-group--suffix .form-input {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.form-control-group--suffix .form-select {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  width: auto;
  min-width: calc(100px * var(--ui-scale));
}

.form-control-group--actions {
  grid-template-columns: 1fr auto;
  gap: calc(8px * var(--ui-scale));
  align-items: end;
}

.form-control-group--actions-2 {
  grid-template-columns: 1fr auto auto;
  gap: calc(8px * var(--ui-scale));
  align-items: end;
}

.form-control-group--inline {
  display: flex;
  gap: calc(4px * var(--ui-scale));
  align-items: stretch;
}

/* Split variant（分离式，对比 --suffix 的连体削角）：圆角沿用控件基类，无需重复声明；
   设计稿邮箱行：输入框 119 + 间距 4 + 下拉 145 = 268（认证卡片内容宽） */
.form-control-group--split {
  grid-template-columns: calc(119px * var(--ui-scale)) calc(145px * var(--ui-scale));
  gap: calc(4px * var(--ui-scale));
}

/* --- Password Field --- */
.password-field {
  position: relative;
}

.password-field .form-input {
  padding-right: calc(34px * var(--ui-scale));
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: var(--gap-8);
  width: calc(18px * var(--ui-scale));
  height: calc(18px * var(--ui-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  opacity: 0.25;
  transform: translateY(-50%);
  transition: opacity 0.16s ease;
}

.password-toggle:hover,
.password-toggle--visible {
  opacity: 0.55;
}

.password-toggle svg {
  width: calc(16px * var(--ui-scale));
  height: calc(16px * var(--ui-scale));
}

.password-toggle--visible .password-eye-visible {
  display: block;
}

.password-toggle--visible .password-eye-hidden {
  display: none;
}

.password-eye-visible {
  display: none;
}

/* --- Validation --- */
.field-validation-error {
  display: block;
  margin-top: var(--gap-4);
  color: var(--color-danger);
  font-size: var(--font-9);
  line-height: 1;
}

/* Empty validation message should not occupy visible space */
.field-validation-error:empty {
  display: none;
}

/* No-error state — hidden by default, activated by unobtrusive validation JS */
.field-validation-valid {
  display: none;
}