/* 登录页。独立页面，不加载 app.css（46KB 里没有一条是这张页用得上的）。
 *
 * 平铺，没有卡片外框。层级靠字号、留白和「白色输入框浮在灰底上」拉开，
 * 不再描一道边。
 */

:root {
  --page: #eaedf3;          /* 灰蓝底 */
  --surface: #ffffff;       /* 输入框 */
  --ink: #2b3648;
  --ink-soft: #5b6779;
  --ink-muted: #a2abb9;     /* 占位符 */
  --brand: #2c4a8c;
  --brand-ink: #ffffff;
  --disabled: #b3bac8;
  --danger: #c0392b;
  --shadow: 0 1px 2px rgba(43, 54, 72, .06);
}

:root[data-theme="dark"] {
  --page: #141a23;
  --surface: #1f2733;
  --ink: #e8ecf2;
  --ink-soft: #bcc6d1;
  --ink-muted: #6f7b8a;
  --brand: #4a7bc8;
  --brand-ink: #ffffff;
  --disabled: #39424f;
  --danger: #e0705f;
  --shadow: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
               'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* min-height 用 dvh：手机上软键盘弹出时 vh 不缩，内容会被顶出屏幕外 */
.wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}

/* 视觉重心略高于几何中心 —— 正中会显得往下坠 */
.sheet { width: 100%; max-width: 372px; margin-bottom: 4vh; }

/* ---- 标题区 --------------------------------------------------------------- */
.brand {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  margin-bottom: 26px;
}
.mark {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 2px solid var(--brand); border-radius: 13px;
  color: var(--brand);
}
/* clamp 的下限管窄屏：手机上按视口宽收，不然 8 个字顶出屏幕。
   nowrap 保住一行 —— 标题折成两行，整张页的重心就散了。 */
.brand h1 {
  margin: 16px 0 0;
  font-size: clamp(23px, 7.6vw, 36px);
  font-weight: 700; letter-spacing: 0; line-height: 1.18;
  white-space: nowrap;
}
.lead {
  margin: 9px 0 0;
  font-size: 13.5px; color: var(--ink-muted);
}
.lead:empty { display: none; }     /* 登录态没有副标题，别留一段空白 */

/* ---- 屏容器 ---------------------------------------------------------------
   高度在切换时由 JS 补间（见 login.js 的 swap）。这里只声明缓动，
   具体高度值是 JS 临时写上去的行内样式，动画完就摘掉。 */
.stage { position: relative; }
.screen { display: block; }
.hidden { display: none !important; }

/* ---- 输入 ----------------------------------------------------------------- */
.pane { display: block; }

.input {
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 15px;
  background: var(--surface); border: 1px solid transparent; border-radius: 13px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  transition: border-color .16s, box-shadow .16s;
}
.input:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.input .ico { flex: none; width: 18px; height: 18px; color: var(--ink-muted); }
.input input {
  flex: 1; min-width: 0;
  height: 100%; padding: 0;
  background: none; border: 0;
  color: var(--ink);
  font-size: 15px;      /* < 16px 会让 iOS Safari 聚焦时自动放大整页 */
  font-family: inherit;
}
.input input:focus { outline: none; }
.input input::placeholder { color: var(--ink-muted); }

.peek {
  flex: none; display: flex; align-items: center;
  width: 22px; height: 22px; padding: 0;
  background: none; border: 0;
  color: var(--ink-muted); cursor: pointer;
}
.peek svg { width: 18px; height: 18px; }
.peek:hover { color: var(--ink-soft); }

/* ---- 公司名下拉 -----------------------------------------------------------
   可选可填的 combobox，不是 select —— 下拉只是候选，想填列表外的公司照样填。

   下拉层用绝对定位浮在上面，不占文档流：它一撑开就会改变 .stage 的高度，
   而屏切换那套高度补间正盯着这个高度，会被它带得一跳一跳。 */
.combo { position: relative; margin-bottom: 12px; }
.combo > .input { margin-bottom: 0; }

.caret {
  flex: none; display: flex; align-items: center;
  width: 20px; height: 20px; padding: 0;
  background: none; border: 0;
  color: var(--ink-muted); cursor: pointer;
  transition: transform .22s cubic-bezier(.36,.02,.16,1);
}
.caret svg { width: 18px; height: 18px; }
.combo.open .caret { transform: rotate(180deg); }

.options {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  max-height: 208px; overflow-y: auto;
  padding: 5px;
  background: var(--surface); border-radius: 12px;
  box-shadow: 0 6px 20px rgba(43, 54, 72, .13);
}
:root[data-theme="dark"] .options { box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }

.option {
  padding: 11px 12px; border-radius: 8px;
  font-size: 14.5px; color: var(--ink);
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 键盘上下键选中的那条与鼠标悬停用同一个样式 —— 两套高亮同时亮着会看不出
   回车会选哪条。 */
.option:hover, .option.active { background: var(--page); }

/* ---- 记住登录状态 -------------------------------------------------------- */
.row {
  display: flex; align-items: center;
  margin: 6px 2px 0;
}
.check {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--ink-soft);
  cursor: pointer; user-select: none;
}
/* 原生 checkbox 各平台长得都不一样，自己画一个。真的 input 留着（不能
   display:none，否则键盘 Tab 和读屏都够不着），推到看不见的地方。 */
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  flex: none; position: relative;
  width: 18px; height: 18px;
  background: var(--surface); border-radius: 5px;
  box-shadow: var(--shadow);
  transition: background .16s;
}
.check .box::after {
  content: ''; position: absolute;
  left: 6px; top: 2.6px; width: 5px; height: 9.5px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg) scale(.4); opacity: 0;
  transition: transform .16s, opacity .16s;
}
.check input:checked + .box { background: var(--brand); }
.check input:checked + .box::after { transform: rotate(42deg) scale(1); opacity: 1; }
.check input:focus-visible + .box {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* 注册/返回这类次级动作。原来 13.5px、零内边距 —— 比输入框的提示字还小，
   手机上也几乎点不中。系统刚上线时「注册」其实是多数人要走的那条路，
   不该被处理成一句顺带提一嘴的脚注。
   padding 撑出约 45px 的可点高度（移动端可点目标的通行下限）。 */
.link {
  padding: 12px 6px; background: none; border: 0;
  color: var(--brand);
  font-size: 15px; font-family: inherit; font-weight: 500;
  cursor: pointer;
}
.link:hover { text-decoration: underline; }

/* 高度固定，有没有错误都占这么多 —— 否则报错时按钮会往下跳一截 */
.err {
  min-height: 18px;
  margin: 12px 2px 8px;
  font-size: 12.5px; color: var(--danger); line-height: 1.45;
}

.submit {
  width: 100%; height: 50px;
  background: var(--brand); color: var(--brand-ink);
  border: 0; border-radius: 13px;
  font-size: 15.5px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: background .16s, opacity .16s;
}
.submit:hover:not(:disabled) { opacity: .9; }
.submit:disabled { background: var(--disabled); cursor: default; }

.foot {
  margin-top: 18px;
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
.foot-lead { font-size: 15px; color: var(--ink-muted); }

/* 密码管理器认账号用的隐藏字段：不能 display:none，那样它读不到 */
.offscreen { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* 动效关掉的偏好要尊重：前庭失调的人看滑动会不适 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}