/* ==========================================================================
   登录页。左侧品牌与能力概览，右侧登录卡。
   与主界面同一套令牌，不引入新色值。

   need_v1.md §3.3 把权限体系列为不在范围内 —— 这里只做身份标识，
   用于草稿→定稿的「确认人可追溯」，不做角色与鉴权。
   ========================================================================== */

.login {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--bg);
  z-index: 100;
  opacity: 1;
  transition: opacity 260ms var(--ease);
}
/**
 * 必须显式处理 hidden。
 * hidden 属性本质只是浏览器默认样式表里的 display:none，
 * 上面那句 display:grid 权重更高，会把它顶掉 ——
 * 结果是已登录时登录层仍然铺满全屏，z-index:100 挡住整个应用。
 * 任何「设了 display 又用 hidden 控制」的元素都有这个坑。
 */
.login[hidden] { display: none; }
.login.is-out { opacity: 0; pointer-events: none; }
body.is-login { overflow: hidden; }

/* ------------------------------------------------------------------ 左栏 */

.login-left {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--sp-10) var(--sp-10) var(--sp-8);
  background: var(--surface);
  border-right: 1px solid var(--line-s);
  overflow: hidden;
}

/* 黄铜细线 + 45° 菱形，用量极少 */
.login-left::before {
  content: '';
  position: absolute; left: var(--sp-10); right: var(--sp-10); top: 0;
  height: 1px;
  background: linear-gradient(to right, var(--brass), transparent 72%);
}
.login-deco {
  position: absolute; right: -60px; bottom: -60px;
  width: 240px; height: 240px;
  border: 1px solid var(--line-s);
  transform: rotate(45deg);
  pointer-events: none;
}
.login-deco::after {
  content: '';
  position: absolute; inset: 34px;
  border: 1px solid var(--line-s);
}

.login-brand {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-10);
}
.login-logo {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--brass);
  border-radius: var(--radius-sm);
  color: var(--brass);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
}
.login-name {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  letter-spacing: .08em;
  color: var(--ink);
}
.login-org { font-size: var(--fs-sm); color: var(--ink3); margin-top: 2px; }

.login-points { list-style: none; margin: 0; padding: 0; flex: 1; }
.login-points li {
  position: relative;
  padding-left: var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--ink2);
  max-width: 400px;
}
.login-points li::before {
  content: '';
  position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px;
  border: 1px solid var(--brass);
  transform: rotate(45deg);
}
.login-points b {
  color: var(--ink);
  font-weight: 600;
  margin-right: var(--sp-2);
}

.login-foot {
  font-size: var(--fs-xs);
  line-height: 1.85;
  color: var(--ink3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-s);
  max-width: 400px;
}

/* ------------------------------------------------------------------ 右栏 */

.login-right { display: grid; place-items: center; padding: var(--sp-6); }

.login-card { width: 100%; max-width: 316px; }

.login-head { margin-bottom: var(--sp-6); }
.login-head h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  letter-spacing: .04em;
  margin: 0 0 var(--sp-1);
  color: var(--ink);
}
.login-head span { font-size: var(--fs-sm); color: var(--ink3); }

.field { margin-bottom: var(--sp-4); }
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  color: var(--ink3);
  margin-bottom: 5px;
}
.login .input {
  display: block; width: 100%;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line-s);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-base);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.login .input:focus { border-color: var(--brass); }
.login .input::placeholder { color: var(--ink3); }

.login-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.checkbox {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm);
  color: var(--ink2);
  cursor: pointer;
}
.checkbox input { accent-color: var(--brass); }
.login-link {
  font-size: var(--fs-sm);
  color: var(--ink3);
  text-decoration: none;
  cursor: pointer;
}
.login-link:hover { color: var(--brass); }

.login-btn { width: 100%; justify-content: center; padding: 10px; }

.login-alt {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-4) 0;
}
.login-alt .line { flex: 1; height: 1px; background: var(--line-s); }
/* 两条线中间那个「或」是纯分隔符,不是分区标题 —— 独自降回淡的一档,
   不跟着 base.css 里 .label 的提亮走。它抢眼反而怪。 */
.login-alt .label {
  font-size: var(--fs-label);
  letter-spacing: .14em;
  color: var(--ink3);
}

.login-err {
  min-height: 18px;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--high);
}

.login-demo {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-s);
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--ink3);
}

/* --------------------------------------------------------------- 窄屏 */

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-left { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .login { transition: none; }
}