/**
 * AGC · 认证表单样式
 * 路径：/public/css/auth.css
 *
 * 覆盖：登录 / 注册页表单。
 *
 * v2.0.0 整理：删除 .auth-form__error（与 .settings-form__error、各页内联提示
 * 属同一套视觉，已统一为 global.css 的 .notice / .notice--error）。
 */

/* ── 1. 表单容器 ── */
.auth-form {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-lg);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-white);
}

.auth-form__title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: var(--border);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── 2. 表单项 ── */
.form-field { margin-bottom: var(--space-md); }

.form-field label,
.form-field__label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-field .input { width: 100%; }

.form-field__hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-muted);
}

/* 提示行右对齐变体（用于「忘记密码？」这类链接） */
.form-field__hint--right {
  text-align: right;
}

.form-field__link {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-black);
  text-decoration: underline;
}

.form-field__link:hover {
  color: var(--color-red);
}

/* 表单开头的说明段落（重置密码页使用） */
.auth-form__lead {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border-left: var(--border-strong);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-muted);
}

/* 说明：v2.0.0 移除了 .form-field__error。
   服务端表单错误统一用 global.css 的 .notice--error 整块呈现，
   前端字段级校验则直接由浏览器原生约束（required / minlength）承担，
   原先的 .form-field__error 从未被任何模板输出，属死代码。 */

/* ── 3. 邮箱验证码行（输入框 + 获取按钮） ──
   注意：本区块的按钮必须排除在下方「.auth-form 提交按钮」的全宽规则之外，
   否则 .btn 的 width:100% 会在 flex 行里把输入框挤成一个窄条
   （v2.1.0 的布局缺陷即由此产生）。 */
.code-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-sm);
}

/* 输入框占据剩余空间。显式 width:auto 覆盖 global.css 里 .input 的 width:100%，
   否则在 flex 容器中会出现「100% + 按钮」溢出后又被压缩的怪异表现 */
.code-row .input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 220px;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 4px;
  text-align: center;
  padding: var(--space-sm);
}

.code-row__btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 118px;
  margin-top: 0;
  padding: var(--space-sm) var(--space-md);
  font-size: 13px;
  white-space: nowrap;
}

.code-row__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 验证码提示文案的默认色（成功时由脚本改为绿色） */
.js-code-message {
  transition: color 0.15s;
}

/* ── 4. 提交按钮与底部链接 ──
   只作用于表单的直接子按钮（即提交按钮），不波及 .code-row 内的按钮 */
.auth-form > .btn,
.auth-form > button[type="submit"] {
  display: block;
  width: 100%;
  margin-top: var(--space-sm);
  padding: 12px;
  font-size: 16px;
}

.auth-form__footer {
  margin-top: var(--space-md);
  font-size: 13px;
  text-align: center;
}

.auth-form__footer a {
  font-weight: 700;
  color: var(--color-black);
  text-decoration: underline;
}

.auth-form__footer a:hover { color: var(--color-red); }

/* ── 5. 响应式 ── */
@media (max-width: 767px) {
  .auth-form {
    max-width: none;
    margin: 0;
    border: none;
    padding: var(--space-md);
  }

  /* 窄屏下把验证码输入框与按钮改为上下排列，避免两者都被压缩 */
  .code-row {
    flex-direction: column;
    align-items: stretch;
  }

  .code-row .input {
    max-width: none;
    width: 100%;
  }

  .code-row__btn {
    width: 100%;
    min-width: 0;
  }
}