/* register-accent.css — Register 页专用样式（vwlab.io report DNA 全套应用）
 *
 * 与 auth-accent.css 的区别（per 用户决定的 10 项改动）：
 *   1) bg = theme-cream (#F5E8D1)，fg/accent = vwlab maroon (#5D3136)
 *   2) .auth-input 文字色 = maroon（不只是 focus）
 *   3) .auth-label = maroon + opacity 1（不再是半透明 fg）
 *   4) .auth-submit bg = wine + fg = cream（替换 login 的 yellow + black）
 *   5) .auth-input-line--focus bg = wine（替换 yellow）
 *   6) .auth-eyebrow = IBM Plex Mono 300 maroon（替换 utility 字体）
 *   7) .auth-switch a:hover 加 1px wine borderBottom 浮上来（vwlab .lined 链接）
 *
 * login.html 继续用 auth-accent.css（保留 yellow + wine flyingpapers 招牌）
 *
 * 规则（per spec §2.4 + C6/C8/C9/C11/C13）：
 *   1) accent 表面 ≤5%（submit wine bg + focus wine underline + switch borderBottom hover）
 *   2) focus underline scaleX 0→1 — 保留 Auth 签名（基线色换 wine）
 *   3) border-radius: 0 (C13)
 *   4) 所有 transition 用 var(--dur-micro) + var(--ease)
 *   5) 无 @keyframes (C11) — shake 用 setTimeout chain
 *   6) reduced-motion 兼容
 */

/* ---------- Auth hero ---------- */
.auth-hero {
  margin-bottom: clamp(40px, 6vh, 56px);
  max-width: 480px;
}
.auth-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;  /* vwlab Mono tag */
  font-size: 11px;
  font-weight: 300;                                                      /* vwlab Mono 300 */
  letter-spacing: 0.96px;                                                /* 保留 springs tracking */
  text-transform: uppercase;
  color: var(--accent-wine);                                             /* vwlab 酒红 maroon ink */
  opacity: 1;
  margin-bottom: 20px;
}
.auth-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);   /* 横排单行 + 略缩小 — 5 中文字 × 88px = 440px < 480px 列宽,不换行 */
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 24px;
  color: var(--accent-wine);  /* vwlab 整页酒红墨水 */
}
.auth-display .accent { font-style: italic; color: var(--accent-wine); }  /* "院队。" 同色加深 */
.auth-lead {
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.5;
  opacity: 0.7;
  margin: 0;
  max-width: 36ch;
  color: var(--accent-wine);
}

/* ---------- Form ---------- */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 480px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-label {
  font-family: var(--font-utility);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--accent-wine);   /* vwlab maroon label ink */
  opacity: 1;                   /* 拉满强调（之前 0.6 太弱）*/
}

.auth-input-wrap {
  position: relative;
  padding-bottom: 8px;
}

.auth-input,
.auth-select {
  width: 100%;
  height: 40px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;                  /* flyingpapers 微字号,缩 input 配合大标题 */
  letter-spacing: -0.4px;
  color: var(--accent-wine);        /* vwlab input maroon ink（不只是 focus 才变）*/
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.auth-input::placeholder {
  color: var(--accent-wine);
  opacity: 0.3;                     /* vwlab 含蓄 placeholder */
  transition: opacity var(--dur-micro) var(--ease);
}
.auth-input:focus::placeholder { opacity: 0.2; }

/* baseline line — 酒红基线（cream bg 上 fg = wine）*/
.auth-input-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent-wine);
  opacity: 0.25;
}

/* focus underline — register 主题换 wine（保留 springs scaleX 0→1 签名）*/
.auth-input-line--focus {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent-wine);   /* vwlab maroon focus underline（替换 login yellow）*/
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-micro) var(--ease);
}
.auth-input:focus ~ .auth-input-line--focus,
.auth-select:focus ~ .auth-input-line--focus,
.auth-input-wrap.is-focused .auth-input-line--focus {
  transform: scaleX(1);
}

/* select arrow */
.auth-select-wrap {
  position: relative;
}
.auth-select-wrap::after {
  content: '↓';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-utility);
  font-size: 12px;
  color: var(--accent-wine);
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Submit — wine bg + cream fg（替换 login yellow + black）---------- */
.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 52px;
  padding: 0 32px;
  margin-top: 16px;
  font-family: var(--font-utility);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--bg);                        /* cream 反色 fg (theme-cream 下 var(--bg) = cream) */
  background: var(--accent-wine);          /* vwlab maroon CTA bg */
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition:
    transform var(--dur-micro) var(--ease),
    box-shadow var(--dur-micro) var(--ease),
    opacity var(--dur-micro) var(--ease);
}
.auth-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-3);
}
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
}
.auth-submit .arrow { transition: transform var(--dur-micro) var(--ease); }
.auth-submit:hover .arrow { transform: translateX(4px); }

/* ---------- Error ---------- */
.auth-error {
  display: flex;
  align-items: center;
  gap: 12px;
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  background: rgba(93, 49, 54, 0.12);      /* wine 浅底（cream 上更柔）*/
  border-left: 2px solid var(--accent-wine);
  color: var(--accent-wine);                /* wine 错误文字 */
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: -0.2px;
  opacity: 0;
  transform: translateX(0);
  transition:
    max-height var(--dur-micro) var(--ease),
    opacity var(--dur-micro) var(--ease),
    padding var(--dur-micro) var(--ease),
    transform 0.06s linear;
}
.auth-error.is-visible {
  max-height: 96px;
  opacity: 1;
  padding: 14px 16px;
}
.auth-error__icon {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;  /* ERR 标签也用 Mono 呼应 eyebrow */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  flex-shrink: 0;
  padding: 2px 6px;
  border: 1px solid currentColor;
}

/* ---------- Already signed in (2026-10-20) ----------
   Replaces the old §4 behaviour that silently location.assign('/')-ed an
   already-authenticated visitor off the form, destroying whatever they had
   typed and aborting an in-flight POST /api/auth/register. Now it just says so.
   Colors mirror .auth-error — wine accent reads correctly on the cream theme. */
.auth-already {
  margin: 0 0 20px;
  padding: 12px 16px;
  background: rgba(93, 49, 54, 0.12);
  border-left: 2px solid var(--accent-wine);
  color: var(--accent-wine);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
}
.auth-already[hidden] { display: none; }
.auth-already strong { font-weight: 700; }
.auth-already a {
  color: var(--accent-wine);
  font-weight: 600;
  text-decoration: underline;
  transition: opacity var(--dur-micro) var(--ease);
}
.auth-already a:hover { opacity: 0.7; }

/* ---------- Switch (footer link) — vwlab .lined 链接 + hover borderBottom ---------- */
.auth-switch {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--accent-wine);
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-utility);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--accent-wine);
}
.auth-switch a {
  color: var(--accent-wine);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid transparent;    /* 占位防 hover 抖动 */
  padding-bottom: 1px;
  transition:
    border-color var(--dur-micro) var(--ease),
    opacity var(--dur-micro) var(--ease);
}
.auth-switch a:hover {
  border-bottom: 1px solid var(--accent-wine);   /* vwlab .lined 链接 hover 反馈 */
}
.auth-switch a .arrow { transition: transform var(--dur-micro) var(--ease); }
.auth-switch a:hover .arrow { transform: translateX(4px); }

/* ---------- Stage (single column center) ---------- */
.auth-stage {
  min-height: calc(100vh - 64px);
  display: grid;
  place-items: center;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 64px) clamp(60px, 8vh, 100px);
}
.auth-stage__inner {
  width: 100%;
  max-width: 520px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .auth-display { font-size: clamp(40px, 10vw, 64px); }
  .auth-form { gap: 22px; }
  .auth-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}