/* ===========================
   认证区基础组件（登录 / 注册 / 找回共用）
   =========================== */
.auth-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
}

.auth-card {
  /* 卡片横向 padding 抽为变量：分隔线负边距与其单点耦合 */
  --auth-card-pad-x: calc(16px * var(--ui-scale));

  width: var(--auth-card-w);
  /* 描边走 inset 阴影而非 border：不占盒模型，内容区宽高等同设计稿外形（对应 SVG 的 0.5px 内描边） */
  border: 0;
  box-shadow: inset 0 0 0 calc(1px * var(--ui-scale)) var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: calc(12px * var(--ui-scale)) var(--auth-card-pad-x) calc(16px * var(--ui-scale));
}

.auth-title {
  margin-bottom: calc(24px * var(--ui-scale));
  font-size: var(--font-11);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.022em;
}

/* 正文恒单行（最长 18 字 × 11px ≈ 202px < 内容宽 268px）：行高 1 使基线 58 与设计稿逐像素对应，字距同设计稿；
   颜色/字号继承 body 基准，单段落块级布局天然左对齐，无需 flex */
.auth-copy {
  line-height: 1;
  letter-spacing: 0.022em;
}

.auth-hidden-email {
  display: none;
}

/* ===========================
   分隔线（负边距与卡片 padding 经变量耦合，全页唯一一份）
   =========================== */
.auth-divider {
  height: calc(16px * var(--ui-scale));
  border: 0;
  margin: var(--gap-8) calc(-1 * var(--auth-card-pad-x));
  display: flex;
  align-items: center;
  background: transparent;
}

.auth-divider::before {
  content: '';
  flex: 1;
  /* 实心填充条：与卡片/输入框的 inset 阴影同一渲染路径，粗细一致 */
  height: calc(1px * var(--ui-scale));
  background: var(--color-border);
}

/* ===========================
   操作区
   =========================== */
.auth-actions {
  display: grid;
  gap: var(--gap-8);
}

.auth-actions .btn {
  letter-spacing: 0.022em;
}

/* 设计稿次级按钮字重 400（buttons.css 的 .btn 基类为 600） */
.auth-actions .btn-secondary {
  font-weight: 400;
}

.auth-extra {
  margin-top: var(--gap-8);
  /* 容器字号即区域唯一字号（内部链接继承此值）：缺省会按 body 的 11px 计算行盒 strut，把区域撑高 2px */
  font-size: var(--font-9);
  line-height: 1;
  text-align: center;
}

.auth-link-muted {
  color: var(--color-text-soft);
  font-weight: 500;
  letter-spacing: 0.036em;
  text-decoration: underline;
}

/* ===========================
   提示条（固定高度防跳动，未激活时用 visibility 预留占位）
   =========================== */
/* 设计稿 error 区：标签与正文为同一行内连续排布（无 flex 间距），字距 0.022em */
/* line-height 取 normal：行盒按字体 metrics(ascent+descent) 定高，基线落在条中心 +(a-d)/2 处，
   即字体设计的光学中心，任意 --ui-scale / DPR 下墨水都居中；若写成数值（如 1），em 盒居中 +
   分数像素取整会让文本在 1.25/1.5 等档位视觉上移 1~2px */
.auth-stage > .alert {
  height: calc(32px * var(--ui-scale));
  margin-top: var(--gap-8);
  padding: 0 var(--gap-12);
  gap: 0;
  line-height: normal;
  letter-spacing: 0.022em;
}

/* 特异度高于 feedback.css 的 .alert:not(.is-visible)，且本文件后加载，可覆盖其 display:none */
.auth-stage > .alert[data-auth-alert]:not(.is-visible) {
  display: flex;
  visibility: hidden;
}

/* 设计稿错误条独立配色 #ff6565（与输入框错误描边 --color-danger #f77 不同，系设计稿原样） */
.auth-stage > .alert--danger {
  background: rgba(255, 101, 101, 0.1);
}

.auth-stage > .alert--danger .alert__label {
  color: #ff6565;
}

/* ===========================
   表单控件（认证区设计规格：32px 高；描边机制/字号/交互色/错误态已统一于 forms.css 基类）
   =========================== */
/* 标签字距 0.036em 已上提 forms.css 基类，认证区覆盖退役 */

.auth-stage .form-input {
  height: calc(32px * var(--ui-scale));
}

/* 邮箱后缀下拉的高度与文字隐藏已统一于 forms.css 基类（全站 select 32px 标准） */

/* 认证区标签字距按设计稿 0.022em；行高 normal 已在 choices.css 基类统一 */
.auth-stage .checkbox-label {
  letter-spacing: 0.022em;
}

/* 设计稿 eye-icon 位置：图标盒与内部 svg 等大（19.07px），在 32px 输入框内垂直居中（沿用基类 top:50% + translateY(-50%)），右距 6.47px */
.auth-stage .password-toggle {
  right: calc(6.47px * var(--ui-scale));
  width: calc(19.07px * var(--ui-scale));
  height: calc(19.07px * var(--ui-scale));
  opacity: 0.2;
}

/* 设计稿 eye-icon 渲染盒 19.07px：hidden 态为 16 坐标系图标（等效 scale 1.192），visible 态为 24 坐标系图标缩入，两态同盒互换 */
.auth-stage .password-toggle svg {
  width: calc(19.07px * var(--ui-scale));
  height: calc(19.07px * var(--ui-scale));
}

/* ===========================
   校验
   =========================== */
.auth-stage .field-validation-error,
.auth-stage .field-validation-valid {
  display: none;
}

/* ===========================
   下拉选择器（设计稿 注册.svg 收起态 / 注册5.svg 展开态；
   结构/交互复用 wwwroot/js/forms/combobox.js，此处仅认证区主题差异）
   =========================== */
/* 收起态几何与字色（32px 高、无描边走 inset 阴影机制、左内距 12、字重 400）已统一于 combobox.css 基类 */

/* 展开态触发器描边（inset 阴影，不占盒模型）已统一于 combobox.css 基类，全站生效 */

/* 展开态标头当前选中项字重 600（注册5.svg，认证区专属） */
.auth-stage .combobox--open .combobox__value {
  font-weight: 600;
}

/* 图标几何（16×16、右距 gap-12 即设计稿 12px）与 chevron/X 双路径样式已统一于 combobox.css 基类 */

/* 展开面板外框（inset 阴影三边线）、选项内距/字色/分隔线/选中态均已统一于 combobox.css 基类 */

/* ===========================
   冷却状态（设计稿 注册4.svg：盒模型/字体与常态一致，仅整体透明度 0.4 + 禁用指针）
   =========================== */
.auth-actions .btn.is-cooling-down {
  opacity: 0.4;
}

/* ===========================
   登录 · 步骤 1（设计稿：登录.svg，卡片 300×319，顶距视口 200）
   =========================== */
.login-step-1 .auth-card {
  padding-bottom: calc(18px * var(--ui-scale));
}

.login-step-1 .form-field {
  gap: calc(8px * var(--ui-scale));
  margin-bottom: calc(15px * var(--ui-scale));
}

.login-step-1 .form-field + .form-field {
  margin-bottom: calc(12px * var(--ui-scale));
}

.login-step-1 .auth-extra {
  margin-top: calc(12px * var(--ui-scale));
}

/* ===========================
   登录两步确认（/Login/ConfirmTwoFactor，设计稿 ConfirmTwoFactor.svg：
   卡片 300×124，顶距视口 200（page-wrapper 基准，与登录页同位）；
   盒模型 14+11+24 + 正文 11 + 20 + 按钮 26 + 下 padding 18 = 124 精确闭合，
   标题/正文基线 23/58 与设计稿逐像素对应）
   =========================== */
.login-confirm .auth-card {
  padding-top: calc(14px * var(--ui-scale));
  padding-bottom: calc(18px * var(--ui-scale));
}

/* 正文行盒底 60 → 按钮顶 80（设计稿 Button translate(16,80)） */
.login-confirm .auth-actions {
  margin-top: calc(20px * var(--ui-scale));
}

/* ===========================
   邮箱请求步（注册 / 找回步骤 1，设计稿 注册.svg / 找回.svg 完全同构：
   卡片 300×204，顶距视口 248 = page-wrapper 200 + 48；
   盒模型分解 12+11+24+49+0 + 分隔线(8+16+8) + 按钮(26+8+26) + 下 padding 16 = 204）
   =========================== */
.register-step-1,
.forgot-step-1 {
  padding-top: calc(48px * var(--ui-scale));
}

.register-step-1 .form-field,
.forgot-step-1 .form-field {
  /* 标签(9px) + 间距 8 → 输入行顶 = 字段顶 + 17（设计稿 64），同 .login-step-1 */
  gap: calc(8px * var(--ui-scale));
}

/* ===========================
   待确认页（登录 / 注册 / 找回步骤 2，设计稿 登录3.svg / 注册2.svg / 找回2.svg：
   三页同构，卡片 300×84，顶距视口 318 = page-wrapper 200 + 此处 118）
   =========================== */
.login-step-2,
.register-step-2,
.forgot-step-2 {
  padding-top: calc(118px * var(--ui-scale));
}

/* 卡片内盒还原设计稿坐标：上 padding 14（标题基线 23）、下 padding 24；
   11px 字 line-height 1 时基线距盒顶 9px（实测常量），标题盒 11 + 间距 24 + 正文盒 11 → 14+11+24+11+24 = 84 */
.login-step-2 .auth-card,
.register-step-2 .auth-card,
.forgot-step-2 .auth-card {
  padding-top: calc(14px * var(--ui-scale));
  padding-bottom: calc(24px * var(--ui-scale));
}

/* ===========================
   注册确认（步骤 3，设计稿 注册3.svg：卡片 300×322，顶距视口 199 = page-wrapper 200 - 1；
   盒模型分解 12+11+24 + 字段(49+15)+(49+15)+49+12 + 勾选行16+4 + 分隔线16+8 + 按钮26 + 下 padding 16 = 322）
   =========================== */
.register-step-3 {
  /* 设计稿卡片顶距 199，与 page-wrapper 的 200 差 1px */
  margin-top: calc(-1px * var(--ui-scale));
}

.register-step-3 .form-field {
  /* 行距由容器 gap 统一承担（label↔输入框 8px，与登录页同机制；验证消息行的上边距在下文清零） */
  gap: calc(8px * var(--ui-scale));
  /* 字段节距 64 = 字段高 49 + 此处 15，对齐设计稿输入框顶 64/128 */
  margin-bottom: calc(15px * var(--ui-scale));
}

/* gap 已统一字段行距：清零全局错误提示的 4px 上边距，避免与 gap 叠加成 12px */
.register-step-3 .field-validation-error {
  margin-top: 0;
}

/* 末字段与勾选行间距 12（设计稿：确认密码输入框底 224 → 勾选框顶 236） */
.register-step-3 .form-field:has(+ .checkbox-row) {
  margin-bottom: calc(12px * var(--ui-scale));
}

/* 勾选行底 252 → 分隔线块顶 256（设计稿分隔线 y=264，块高 16 居中） */
.register-step-3 .checkbox-row {
  margin-bottom: calc(4px * var(--ui-scale));
}

.register-step-3 .auth-divider {
  margin-top: 0;
}

/* ===========================
   找回重置（步骤 3，设计稿 找回3.svg：卡片 300×234，顶距视口 243 = page-wrapper 200 + 43；
   盒模型分解 12+11+24 + 字段49+15+49+0 + 分隔线(8+16+8) + 按钮26 + 下 padding 16 = 234）
   =========================== */
.forgot-step-3 {
  padding-top: calc(43px * var(--ui-scale));
}

.forgot-step-3 .form-field {
  /* 行距由容器 gap 统一承担（label↔输入框 8px，与登录/注册确认页同机制；验证消息行的上边距在下文清零） */
  gap: calc(8px * var(--ui-scale));
  /* 字段节距 64 = 字段高 49 + 此处 15，对齐设计稿输入框顶 64/128 */
  margin-bottom: calc(15px * var(--ui-scale));
}

/* gap 已统一字段行距：清零全局错误提示的 4px 上边距，避免与 gap 叠加成 12px */
.forgot-step-3 .field-validation-error {
  margin-top: 0;
}

/* 末字段后接分隔线：字段底 160 → 分隔线块顶 168 的 8px 由分隔线 margin-top 承担（设计稿线 y=176） */
.forgot-step-3 .form-field:has(+ .auth-divider) {
  margin-bottom: 0;
}

/* ===========================
   响应式
   =========================== */
@media (max-width: 700px) {
  .auth-card,
  .alert {
    width: min(var(--auth-card-w), calc(100vw - 32px));
  }
}

@media (max-width: 420px) {
  .auth-card,
  .alert {
    width: 100%;
    border-radius: 0;
  }

  /* 描边为 inset 阴影（见 .auth-card），通栏时整体去除 */
  .auth-card {
    box-shadow: none;
  }
}