/* ============================================================================
 * 登录页 —— per-page 样式。
 *
 * 加载方式跟别的 v2 页【不一样】:其它 per-page CSS 由 v2/partials.html 的 <head>
 * 白名单(按 .Active)引入,而登录页是一个不套外壳的独立文档 —— 它在自己的 <head>
 * 里直接 link 本文件。改 partials 的白名单对本页没有任何作用。
 *
 * 设计系统(token / 四主题 / .v2-input / .v2-btn / .v2-hint)全在 app.css 里,这里
 * 一个 token 都不重定义。除了品牌区那几处叠在 var(--accent) 实色上的白色(见下方
 * 说明),不写死任何颜色 —— 亮 / 自动暗 / dark|vscode / oled 四主题自动跟着走。
 *
 * 每条选择器都挂在 .v2-root 下 —— v2 的约定。当初是为了不污染旧版登录页;旧版登录页
 * 已于 P6-2 第 10 把删除,约定照留。
 *
 * 与 app.css 的覆盖关系:本文件在 app.css 【之后】加载,`.v2-root .v2-login-*` 是
 * (0,2,0),与 `.v2-btn.primary` / `.v2-input:focus` 同级但更靠后 → 只覆盖我显式写的
 * 那几个属性(尺寸/圆角/字号),配色仍由 app.css 的组件类给,不会漂移。
 * ========================================================================== */

/* ── 整体:左品牌 / 右表单 ── */
/* 100dvh 写在 100vh 之后:移动端浏览器地址栏收起/展开会改 vh,dvh 才是真视口高度;
   不支持 dvh 的浏览器会丢掉第二行、退回 vh,不会塌成 0 高。 */
.v2-root .v2-login {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

/* ── 左侧品牌区 ──
   背景是 var(--accent) 实色。accent 在四个主题里是同一个值(app.css 只在暗色里改
   --accent-soft/--accent-line,不改 --accent 本身),所以叠在它上面的前景【必须】固定
   为白色系:这些 rgba(255,255,255,…) 不是「写死颜色」偷懒,而是「白字压在品牌色上」这个
   事实本身与明暗主题无关 —— 换成 var(--fg) 会在暗色主题下变成浅灰字压紫底,对比度直接
   崩掉。 */
.v2-root .v2-login-hero {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px;
  overflow: hidden;
  background: var(--accent);
  color: #fff;
}
/* 纯装饰的点阵。模板里已 aria-hidden。 */
.v2-root .v2-login-dots {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image: radial-gradient(circle at 1px 1px, #fff 1.5px, transparent 0);
  background-size: 26px 26px;
}
/* 品牌/文案都要浮在点阵之上,否则会被半透明点阵盖出一层灰翳。 */
.v2-root .v2-login-brand,
.v2-root .v2-login-pitch,
.v2-root .v2-login-hero-foot { position: relative; }

.v2-root .v2-login-brand { display: flex; align-items: center; gap: 12px; }
.v2-root .v2-login-logo {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .15);
  display: flex; align-items: center; justify-content: center;
}
.v2-root .v2-login-word { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }

.v2-root .v2-login-pitch-h {
  font-size: 30px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em;
  max-width: 15em;
}
.v2-root .v2-login-pitch-p {
  margin-top: 14px; max-width: 26em;
  font-size: 14px; line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}
/* 设计稿这里是写死的版本号 `coord v1.62.1`。删掉了(向未认证访客暴露版本号 = 信息泄露,
   何况 login 的 data 里根本没有版本字段,照抄就是谎报)。留空元素只为撑住 space-between
   的三段式布局:没有它,pitch 会被推到底部。 */
.v2-root .v2-login-hero-foot { min-height: 18px; }

/* ── 右侧表单区 ── */
.v2-root .v2-login-panel {
  width: 480px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 64px;
  background: var(--bg);
  overflow-y: auto; /* 矮屏(横屏手机 / 小窗口)下表单自己滚,而不是被裁掉登录按钮 */
}
.v2-root .v2-login-form { width: 100%; max-width: 352px; }

/* 窄屏专用的品牌标记:宽屏下左侧品牌区在场,这里不出现(display:none 同时把它移出
   无障碍树,屏幕阅读器不会听见两遍品牌名)。 */
.v2-root .v2-login-mark { display: none; margin-bottom: 22px; }
.v2-root .v2-login-logo.sm {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
}

.v2-root .v2-login-h1 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.v2-root .v2-login-sub { margin: 6px 0 28px; font-size: 14px; color: var(--muted); }

/* ── 错误条 ──
   三种可见状态共用这一条(401 凭据错误 / 429 限流 / 200 时压根不渲染)。文案由服务端给,
   这里只管样式 —— 所以不要在 CSS 里用 ::before 之类往里塞任何固定文字。
   覆盖 app.css 的 `.v2-root .err`(它是给 Go 直写的 fragment 兜底的:12px、红字、
   margin 8px 0 0),这里升级成软背景条。 */
.v2-root .v2-login-err {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 20px;
  padding: 10px 13px;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  line-height: 1.45;
}
.v2-root .v2-login-err svg { flex-shrink: 0; }

/* ── 输入 ── */
.v2-root .v2-login-lb {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 500; color: var(--fg-2);
}
/* .v2-input 是 38px 的表格/弹窗尺寸;登录页是全屏唯一交互,给到 44px —— 也刚好过移动端
   44px 触摸目标下限。 */
.v2-root .v2-login-in {
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 18px;
  transition: border-color .12s;
}
.v2-root .v2-login-in:last-of-type { margin-bottom: 24px; }

/* ── 提交按钮 ──
   只覆盖尺寸;配色仍走 .v2-btn.primary(accent 底 + --accent-fg 字),四主题不用管。 */
.v2-root .v2-login-submit {
  width: 100%;
  height: 46px;
  border-radius: 11px;
  font-size: 15px;
  box-shadow: var(--shadow-lg);
}

/* ── 说明文字 ──
   覆盖 .v2-hint 的 margin-top:8px —— 它按「贴在输入框下面的一行提示」调的,这里是一段
   独立说明。 */
.v2-root .v2-login-note {
  margin: 22px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--subtle);
}
.v2-root .v2-login-note b { font-weight: 600; color: var(--muted); }
.v2-root .v2-login-note code {
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── 窄屏:品牌区整块让位给表单 ──
   880px 是「480px 表单列 + 一个还看得出是插画的品牌区」的下限;再窄品牌区就成了一条彩色
   竖条,不如让表单占满。 */
@media (max-width: 880px) {
  .v2-root .v2-login { display: block; }
  .v2-root .v2-login-hero { display: none; }
  .v2-root .v2-login-panel {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 32px 22px 40px;
    align-items: flex-start;
  }
  .v2-root .v2-login-form { margin-top: 6vh; }
  .v2-root .v2-login-mark { display: flex; }
  .v2-root .v2-login-h1 { font-size: 22px; }
}

/* 键盘弹起后的横屏手机:vh 极矮,再让表单垂直居中就会把按钮顶出视口。 */
@media (max-height: 560px) {
  .v2-root .v2-login-panel { align-items: flex-start; padding-top: 32px; padding-bottom: 32px; }
  .v2-root .v2-login-form { margin-top: 0; }
}

/* 尊重「减少动态效果」:本页只有一处 transition,但规则要在。 */
@media (prefers-reduced-motion: reduce) {
  .v2-root .v2-login-in { transition: none; }
}