/*
 * 公开页面的唯一一套外观。配色与两端客户端是同一套（DEC-041）：用户从网页注册走到
 * 客户端登录，中间不该换一副面孔。没有主题切换、没有深色模式、不跟随系统。
 * 管理后台另有一份样式，两者不共用。
 * （**这个文件会发给每一个匿名访客**，所以注释里不写任何内部路径。）
 */

:root {
  --brand: #1f6feb;
  --brand-pressed: #1a5fcc;
  --bg: #f7f7f8;
  --surface: #ffffff;
  --text: #16181d;
  --muted: #5b6270;
  --hairline: #e3e5e9;
  --danger: #d13438;
  --success: #1a7f37;
  --caution: #9a6700;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans SC", "PingFang SC",
               "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* 窄屏靠 padding 保证左右留白，宽屏不拉满 */
.page {
  max-width: 26rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

.brand {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.lede {
  margin: 0.5rem 0 2rem;
  color: var(--muted);
}

/* ---- 表单 ---------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 1.25rem; }

.field { display: flex; flex-direction: column; gap: 0.375rem; }

.label { font-size: 0.9375rem; color: var(--muted); }

input[type="email"],
input[type="password"] {
  width: 100%;
  /* 16px 是硬性下限：再小 iOS Safari 会在聚焦时自动放大页面 */
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.75rem 0.875rem;
  /* 输入框在移动端最小 44px 可点高度 */
  min-height: 2.75rem;
}

input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}

/* 出错的框也要有颜色以外的提示：消息条会说明是哪一项 */
input[aria-invalid="true"] { border-color: var(--danger); }

.hint { font-size: 0.8125rem; color: var(--muted); }

.btn {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 8px;
  /* min-height 而不是 height：字体放大时按钮跟着长高，不裁字 */
  min-height: 2.875rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

.btn:hover { background: var(--brand-pressed); }

.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.btn[disabled] { background: var(--muted); cursor: default; }

/* ---- 提示 ---------------------------------------------------------------- */

/* 颜色之外一定还有文字前缀，色觉障碍与屏读用户才分辨得出（同两端客户端的 NoticeBar）。 */
.notice {
  margin: 0;
  padding: 0.75rem 0.875rem;
  border-radius: 8px;
  background: var(--surface);
  border-left: 3px solid var(--hairline);
  font-size: 0.9375rem;
}

.notice-error { border-left-color: var(--danger); color: var(--danger); }
.notice-warn { border-left-color: var(--caution); color: var(--caution); }
.notice-ok { border-left-color: var(--success); color: var(--success); }

/*
 * 提示条是 live region：**不要用 hidden 开关它**，先 hidden 再取消的 live region
 * 在部分屏读软件上不会被朗读。让它留在 DOM 里，空的时候靠这条规则收起来。
 */
.notice:empty { display: none; }

[hidden] { display: none !important; }

/* ---- 页脚 ---------------------------------------------------------------- */

.foot { margin: 2rem 0 0; font-size: 0.9375rem; }
.foot.muted { margin-top: 0.5rem; color: var(--muted); }

/* ---- 帮助页的正文 ---------------------------------------------------- */

/* 链接保留下划线：只靠颜色区分链接对色觉障碍用户不友好。 */
.doc { margin-top: 2rem; }
.doc h2 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
}
.doc h2:first-child { margin-top: 0; }
.doc p { margin: 0 0 0.75rem; }

a { color: var(--brand); }
a:hover { color: var(--brand-pressed); }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- 成功之后 ------------------------------------------------------------ */

.done { display: flex; flex-direction: column; gap: 1rem; }
.done h2 { margin: 0; font-size: 1.25rem; }
.done p { margin: 0; }

/* 这一页本来没有动画，这条只是兜底 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}