/* login-accent.css — Login 页专用样式（v2.0 三色原则 + flyingpapers 装饰动画）
 *
 * 用户最终决定（4 项 + 1 拒绝 + 1 装饰）：
 *   ✓ C: nav 链接色变 1s slow drift (flyingpapers nav DNA)
 *   ✓ bg = 三色中的 cream (#F5E8D1) — body.theme-cream
 *   ✓ 文字 = 三色中的 forest green (#162D24) — 全页 var(--fg)
 *   ✗ flyingpapers 黄色巨字 — 拒绝, display 走 Cormorant italic 全森林绿
 *   ✓ Submit hover → 紫色 #8584BD (flyingpapers fp-indigo) — 品牌色首次落地
 *   ✓ Yellow #F4ED36 纯装饰动画 (.auth-deco 漂浮方块, JS setTimeout chain)
 *
 * 规则（per spec §2.4 + C6/C8/C9/C11/C13）：
 *   1) accent 表面 ≤5%: 紫 submit hover + 黄装饰方块 + 紫 nav hover
 *   2) focus underline scaleX 0→1 — Auth 签名保留（基线色 = forest）
 *   3) border-radius: 0 (C13)
 *   4) 所有 transition 用 var(--dur-micro) / var(--dur-reveal) + var(--ease)
 *   5) 无 @keyframes (C11) — 黄装饰动画用 JS setTimeout chain
 *   6) reduced-motion 兼容
 *   7) IBM Plex Mono 300 eyebrow — 与 register 保持视觉一致
 */

/* ---------- Auth hero ---------- */
.auth-hero {
  margin-bottom: clamp(40px, 6vh, 56px);
  max-width: 480px;
  position: relative;
}
.auth-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--fg);                    /* forest, no wine */
  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(--fg);                    /* 全森林绿, 拒绝黄色 accent */
}
.auth-display .accent {
  /* "回来。" 同色加深 — 拒绝 wine/yellow 强调, 保持三色纪律 */
  font-style: italic;
  color: var(--fg);
}
.auth-lead {
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.5;
  opacity: 0.7;
  margin: 0;
  max-width: 36ch;
  color: var(--fg);
}

/* ---------- 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(--fg);                    /* forest */
}

.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;
  letter-spacing: -0.4px;
  color: var(--fg);                    /* forest text */
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.auth-input::placeholder {
  color: var(--fg);
  opacity: 0.3;
  transition: opacity var(--dur-micro) var(--ease);
}
.auth-input:focus::placeholder { opacity: 0.2; }

/* baseline line — forest（替换原 yellow underline）*/
.auth-input-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--fg);
  opacity: 0.25;
}

/* focus underline — Auth 签名保留, 但基线色 = forest（不上 yellow）*/
.auth-input-line--focus {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--fg);                /* forest underline, 替换原 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(--fg);
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Submit — forest bg normal, PURPLE on hover（flyingpapers accent）---------- */
.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 text on forest bg */
  background: var(--fg);               /* forest bg — 高对比 CTA */
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition:
    background-color 1s ease-in-out,   /* flyingpapers slow color DNA */
    transform var(--dur-micro) var(--ease),
    box-shadow var(--dur-micro) var(--ease),
    opacity var(--dur-micro) var(--ease);
}
.auth-submit:hover {
  background-color: #8584BD;           /* flyingpapers fp-indigo purple */
  transform: translateY(-2px);
  box-shadow: var(--elev-3);
}
.auth-submit:active {
  background-color: #8584BD;
  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(22, 45, 36, 0.10);  /* forest 浅底（cream 上更柔）*/
  border-left: 2px solid var(--fg);    /* forest border */
  color: var(--fg);                    /* forest error text */
  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;  /* 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) ----------
   Same fix as register.html: no silent redirect, just a notice. */
.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) — forest text, hover borderBottom ---------- */
.auth-switch {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--fg);
  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(--fg);
}
.auth-switch a {
  color: var(--fg);
  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(--fg);
}
.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;
  position: relative;
}

/* ---------- Auth decoration — flyingpapers 黄色纯装饰动画 ----------
   一颗 16×16 yellow 方块, 在 auth-hero 右上方做"漂浮 + 旋转"循环,
   用 JS setTimeout chain (C11 禁 @keyframes) — 5 step / 800ms 一步 = 4s 循环.
   这是 flyingpapers DNA 在 login 页唯一的"色彩爆点" — 其余页面保持三色纪律.
*/
.auth-deco {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 16px;
  height: 16px;
  background: var(--accent-yellow);    /* flyingpapers fp-yellow #F4ED36, 纯装饰 */
  pointer-events: none;
  z-index: 0;
  transform-origin: center center;
}

/* ---------- Nav — 1s slow color drift (flyingpapers nav DNA) ---------- */
body.login-page .nav__links a {
  transition: color 1s ease-in-out;    /* 1s 慢色变, 替换全局 0.4s */
}
body.login-page .nav__links a:hover {
  color: #8584BD;                       /* fp-indigo purple — 与 submit hover 统一 */
}

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

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