/*
 * 公开页面的唯一一套外观（阶段 4.5）。
 *
 * 配色与两个客户端是**同一套**（DEC-041 的那几个十六进制值，见 Android 的 ui/theme/Theme.kt
 * 与 Windows 的 App.xaml）：用户从网页注册走到客户端登录，中间不该换一副面孔。
 *
 * 没有主题切换、没有深色模式、不跟随系统、没有动态取色。
 * 风格：居中、留白足、少边框、不堆卡片、不做渐变与动画——这是一个付费产品的注册入口，
 * 不是后台管理页，也不是落地页。
 *
 * 管理后台有它自己的一份样式，两者不共用。
 * （**这个文件会被发给每一个匿名访客**，所以注释里不写任何内部路径。）
 */

: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（role="alert"）。**不要用 hidden 开关它**：
 * 一个先被 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; }
}