/* ==========================================================================
   register.css — 注册页（说明栏 + 表单 + 三级联动地址 + 校验状态）
   表单控件（.input / .field / .field__error / .rate）复用 narrative.css，
   这里只补注册页特有的部分。
   ========================================================================== */

/* ---------- 页面容器：左侧说明，右侧表单 ---------- */
.reg-page {
  padding: clamp(52px, 9vh, 96px) 0 clamp(70px, 10vh, 110px);
}
.reg-head {
  max-width: var(--maxw-wide);
  margin: 0 auto clamp(30px, 5vh, 52px);
  padding: 0 22px;
}
.reg-head h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.reg-head p { color: var(--text-secondary); max-width: 40em; margin: 0; }

.reg-layout {
  width: 100%;
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
}

/* ---------- 左：说明卡 ---------- */
.reg-notes {
  position: sticky;
  top: calc(var(--nav-h) + 26px);
  padding: 26px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: var(--bg-alt);
}
.reg-notes h2 {
  font-size: 15px;
  letter-spacing: 0.02em;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.reg-notes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
}
.reg-notes li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.reg-notes li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.reg-notes li b { color: var(--text); font-weight: 600; }
.reg-notes code {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--fill-hover);
}

/* ---------- 右：表单卡 ---------- */
.reg-card {
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-soft);
  background: var(--bg-elevated);
  box-shadow: var(--sh-1);
  position: relative;
}
.reg-card__legend {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 22px;
}

/* 字段网格：两列自适应，窄屏一列 */
.reg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 20px;
}
.reg-grid .span-2 { grid-column: 1 / -1; }
.reg-grid .field { margin-top: 16px; }

/* ---------- 三级联动：省 / 市 / 区 ---------- */
.cascade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.cascade .field { margin-top: 0; }
.select--cascade {
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%),
                    linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.select--cascade:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--bg-alt);
}

/* 身份证解析出的信息（出生日期 / 性别 / 年龄） */
.id-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  min-height: 22px;
}
.id-hint span {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(48, 209, 88, 0.14);
  color: #1b7f3b;
  font-size: 12px;
  font-family: var(--font-mono);
}
:root[data-theme="dark"] .id-hint span { color: #4ade80; }

/* ---------- 密码：可见性切换 + 强度条 ---------- */
.pwd-wrap { position: relative; }
.pwd-wrap .input { padding-right: 62px; }
.pwd-toggle {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.pwd-toggle:hover { color: var(--text); background: var(--fill-hover); }

.pwd-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.pwd-strength i {
  height: 4px;
  flex: 1;
  border-radius: 4px;
  background: var(--line);
  transition: background-color 0.3s var(--ease);
}
.pwd-strength i.on-weak { background: var(--pink); }
.pwd-strength i.on-mid { background: var(--orange); }
.pwd-strength i.on-strong { background: var(--green); }
.pwd-strength span {
  flex: none;
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

/* ---------- 契约勾选 ---------- */
.field--check { grid-column: 1 / -1; margin-top: 22px; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1.6;
}
.check input {
  width: 18px; height: 18px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--blue);
  cursor: pointer;
}
.field--check.is-invalid .check { color: var(--pink); }
.field--check.is-invalid .check input { outline: 2px solid var(--pink); outline-offset: 2px; }

/* ---------- 底部动作 ---------- */
.reg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.reg-actions .btn--primary { min-width: 132px; }
.reg-actions .muted { font-size: 13px; }
.reg-actions a { font-weight: 500; }

/* ---------- 注册成功后的面板 ---------- */
.reg-done {
  text-align: center;
  padding: clamp(28px, 5vh, 52px) clamp(20px, 3vw, 40px);
}
.reg-done__badge {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--grad-green);
  color: #fff;
  font-size: 34px;
  box-shadow: 0 14px 36px rgba(48, 209, 88, 0.36);
  animation: pop 0.5s var(--ease-out);
}
@keyframes pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.reg-done h2 { font-size: 24px; margin-bottom: 10px; }
.reg-done p { color: var(--text-secondary); max-width: 34em; margin: 0 auto 8px; }
.reg-done__info {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 26px;
}
.reg-done__info span {
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: var(--fill-hover);
  font-size: 13px;
  color: var(--text-secondary);
}

/* 未登录提示条（被留言页拦回来时显示） */
.reg-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: var(--maxw-wide);
  margin: 0 auto 26px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(0, 113, 227, 0.32);
  background: rgba(0, 113, 227, 0.07);
  font-size: 14px;
  color: var(--text-secondary);
}
.reg-alert b { color: var(--text); }
.reg-alert[hidden] { display: none !important; }

/* ---------- 留言页的准入卡（未注册/未登录时替代表单） ---------- */
.gate {
  text-align: center;
  padding: clamp(28px, 5vh, 48px) clamp(20px, 3vw, 40px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-soft);
  background: var(--bg-elevated);
  box-shadow: var(--sh-1);
}
.gate[hidden] { display: none !important; }
.gate__icon {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 16px;
}
.gate h2 { font-size: 22px; margin-bottom: 12px; }
.gate > p {
  max-width: 36em;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 15.5px;
}
.gate__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 26px;
}
.gate__points span {
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: var(--fill-hover);
  font-size: 13px;
  color: var(--text-secondary);
}
.gate__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.gate__actions .link-arrow {
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
  font-size: 14px;
}
.gate__login {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  text-align: left;
}
.gate__login[hidden] { display: none !important; }
.gate__login .reg-actions { margin-top: 20px; padding-top: 0; border-top: none; }

/* 已登录时表单顶部的身份条 */
.whoami {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--fill-hover);
  font-size: 13.5px;
  color: var(--text-secondary);
}
.whoami b { color: var(--text); font-weight: 600; }
.whoami__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.18);
  flex: none;
}
.whoami .chip { margin-left: auto; padding: 5px 12px; font-size: 12.5px; }
.form-sheet[hidden] { display: none !important; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .reg-layout { grid-template-columns: 1fr; }
  .reg-notes { position: static; order: 2; }
}
@media (max-width: 620px) {
  .reg-grid { grid-template-columns: 1fr; }
  .cascade { grid-template-columns: 1fr; }
}

/* ---------- 打印：把说明栏放到前面，去掉交互按钮 ---------- */
@media print {
  .pwd-toggle, .reg-actions { display: none !important; }
}