/* ═══════════════════════════════════════════════════════════
   方块王国社区站 · 表单体系
   ── css/forms.css ──

   前置事实：style.css 全文 545 行里没有任何 form/input/textarea/select/label 规则，
   表单样式在本站属于从零建立的新体系，因此集中放在本文件，不与基础样式冲突。

   视觉语言沿用原站的「像素硬边」：
     border: 3px solid  +  border-radius: 2px  +  focus 时加 3px 硬阴影
   三条硬性约束（改样式时请勿破坏）：
     ① .field-control 字号锁 16px —— 小于该值 iOS Safari 聚焦时会自动放大整个页面
     ② 交互控件 min-height: 44px —— 触控目标最小尺寸，同时也是 WCAG 2.5.5 的建议值
     ③ :focus-visible 的金色描边与 :focus 的绿色边框分层 —— 鼠标点击不出现描边，
        键盘 Tab 必须出现，兼顾观感与可访问性
   ═══════════════════════════════════════════════════════════ */

/* ── 表单容器 ── */
.form-wrap {
  max-width: 560px;
  margin-inline: auto;
}
.form-card {
  background: #fff;
  border: var(--border-px) var(--border-style) var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: clamp(20px, 4vw, 32px);
}
.form-card-head { margin-bottom: 22px; }
.form-card-title {
  font-size: clamp(21px, 3vw, 26px);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--c-brand-dark);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .12);
}
.form-card-sub { margin-top: 6px; font-size: 13.5px; color: var(--c-ink-soft); }

/* 表单提交中整体降饱和，配合按钮文案给出「正在处理」的明确反馈 */
.form-card[aria-busy="true"] .form-body { opacity: .62; pointer-events: none; }

/* ── 字段 ── */
.field { margin-bottom: 18px; }
.field-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 6px;
}
.field-label .req { color: #c62828; margin-left: 2px; }
.field-label .opt { color: var(--c-ink-soft); font-weight: 500; font-size: 12.5px; margin-left: 4px; }

/* 提示行：左边 hint，右边字数计数器 */
.field-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.field-hint { font-size: 12.5px; color: var(--c-ink-soft); }
.field-hint ul { margin: 4px 0 0; padding-left: 18px; list-style: disc; }
.field-hint li { margin-bottom: 2px; }

.counter {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-soft);
  flex: none;
}
.counter.is-short { color: #b06000; }
.counter.is-over { color: #c62828; font-weight: 700; }

/* ── 控件本体 ── */
.field-control {
  display: block;
  width: 100%;
  min-height: 44px;          /* 触控目标 */
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;           /* ★ 防 iOS 聚焦缩放，勿改 */
  line-height: 1.5;
  color: var(--c-ink);
  background: #fff;
  border: var(--border-px) var(--border-style) var(--c-line);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
textarea.field-control {
  min-height: 168px;
  resize: vertical;
  line-height: 1.75;
}
select.field-control {
  /* 隐藏原生箭头，改用 SVG data-uri 画像素三角，保持统一风格 */
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='M0 0h16L8 12z' fill='%232e7d32'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.field-control::placeholder { color: #9aa39c; }
.field-control:hover:not(:disabled) { border-color: var(--c-brand); }
.field-control:focus {
  outline: none;
  border-color: var(--c-brand-deep);
  box-shadow: var(--shadow-hard-sm);
  background: #fbfefb;
}
/* 键盘聚焦再叠一层金色描边：鼠标点击不触发，Tab 一定触发 */
.field-control:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 2px;
}
.field-control:disabled {
  background: #f1f3ef;
  color: #8b9290;
  cursor: not-allowed;
}

/* ── 校验状态 ── */
.field-control.is-invalid {
  border-color: #c62828;
  background: #fff7f6;
}
.field-control.is-invalid:focus { box-shadow: 3px 3px 0 rgba(198, 40, 40, .22); }
.field-control.is-valid { border-color: var(--c-brand-deep); }

.field-msg {
  display: block;
  min-height: 0;
  font-size: 12.5px;
  margin-top: 5px;
}
.field-msg:empty { display: none; }
.field-msg.err { color: #c62828; font-weight: 600; }
.field-msg.err::before { content: "⚠ "; }
.field-msg.ok { color: var(--c-brand-deep); font-weight: 600; }
.field-msg.ok::before { content: "✓ "; }
.field-msg.wait { color: var(--c-ink-soft); }

/* ── 密码强度条 ── */
.pwd-meter {
  margin-top: 7px;
  height: 8px;
  background: #e6eae3;
  border: 2px solid var(--c-line);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  gap: 2px;
  padding: 0;
}
.pwd-meter i { flex: 1; background: transparent; transition: background .2s; }
.pwd-meter[data-level="1"] i:nth-child(-n+1) { background: #d84315; }
.pwd-meter[data-level="2"] i:nth-child(-n+2) { background: #ef6c00; }
.pwd-meter[data-level="3"] i:nth-child(-n+3) { background: var(--c-brand-deep); }
.pwd-meter-text { margin-top: 4px; font-size: 12px; color: var(--c-ink-soft); }

/* ── 密码可见性 / 带按钮的输入组 ── */
.control-group { position: relative; display: flex; }
.control-group .field-control { flex: 1; padding-right: 62px; }
.control-affix {
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: 6px;
  min-height: 0;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-brand-deep);
  background: var(--c-brand-soft);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
}
.control-affix:hover { background: #ddefdb; border-color: var(--c-brand); }
.control-affix[aria-pressed="true"] { background: var(--c-parchment); border-color: var(--c-parchment-d); color: #7a5c22; }

/* ── 复选 ── */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--c-ink-soft);
  padding: 4px 0;
}
.check-row input[type="checkbox"] {
  width: 20px; height: 20px; flex: none;
  margin: 2px 0 0;
  accent-color: var(--c-brand-deep);
  cursor: pointer;
}
.check-row a { color: var(--c-brand-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ── 操作区 ── */
.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px dashed var(--c-line);
}
.form-actions .editor-btn { min-height: 46px; }
.form-actions .spacer { flex: 1; }
.form-footnote { font-size: 12.5px; color: var(--c-ink-soft); }

/* 表单下方的承接文案（如「已有账号？去登录」） */
.form-after {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--c-ink-soft);
}
.form-after a { color: var(--c-brand-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── 表单级提示条 ── */
.form-alert {
  display: block;
  margin-bottom: 18px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  border: var(--border-px) var(--border-style) var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard-sm);
}
.form-alert[hidden] { display: none; }
.form-alert.err { background: #fff3f1; border-color: #c62828; color: #8c1d18; }
.form-alert.ok { background: var(--c-brand-soft); border-color: var(--c-brand-deep); color: var(--c-brand-dark); }
.form-alert.warn { background: #fff8e1; border-color: #b98a00; color: #6d4c00; }

/* ── 通用双列（可两列排布的字段） ── */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ── 灯条提示（toast） ── */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.toast {
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--c-charcoal);
  border: 3px solid #222;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard-sm);
  animation: toast-in .2s ease-out;
  text-align: center;
}
.toast-ok { background: var(--c-brand-deep); border-color: var(--c-brand-dark); }
.toast-err { background: #a52a22; border-color: #7d1f19; }
.toast-warn { background: #a06d00; border-color: #6b4a00; }
.toast.is-out { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 尊重「减少动态效果」偏好 —— 动画的存在与否不影响信息传达本身 */
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-out { animation: none; transition: none; }
  .field-control, .pwd-meter i, .editor-btn { transition: none; }
}

/* ═══════════ 响应式 ═══════════ */
@media (max-width: 767px) {
  /* 单列：两个输入框并排在手机上必然挤成一团 */
  .field-row { grid-template-columns: 1fr; }
  /* column-reverse 让主按钮落到下方 —— 拇指最容易够到的位置 */
  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .form-actions .editor-btn { width: 100%; }
  .form-actions .spacer { display: none; }
  .form-actions .form-footnote { text-align: center; }
  textarea.field-control { min-height: 150px; }

  /* 底部安全区：留出更多空间，避免遮挡输入框与虚拟键盘 */
  .toast-host { bottom: 16px; }
  .toast { padding: 10px 16px; font-size: 13.5px; }
}

@media (max-width: 420px) {
  .field-label { font-size: 13.5px; }
  /* 提示与计数器换行，避免两者互相挤压成两行短句 */
  .field-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .counter { align-self: flex-end; margin-top: -18px; }
  .form-card { padding: 16px 14px; }
  .form-actions .editor-btn { min-width: 0; }
}