/* 静室 · 38-login.css
   两块内容：
     A. 登录页（分屏式）—— .entry-split 及内层，用户选定方案 C2
     B. 改密码页 —— .entry-space + .entry-card（该页模板用的是这组类，保留）

   为什么不套 @layer：
   原样式在 24-digital-studio.css 的 @layer pages 里，选择器形如
   .entry-card input:not([type=checkbox]):not([type=hidden])，具体度高于本文件。
   按 CSS 级联层规则，未分层的样式优先级高于所有 @layer，所以此处不套层才能稳定覆盖，
   且不需要 !important。

   布局依据（design/login-c2.html）：
     · 分屏 4:6，左右都是白底，只靠一条细线分开（学 Squarespace「极简增强信任」）
     · 「静室」竖排：与书脊呼应；竖排天然地不需要多余文案
     · 左侧零文案、零背景，只有灯和名字
   其余依据 design/AESTHETIC-SPEC.md：
     · 字号层级 1.25–1.5 倍 · 8px 网格 · 接近性原则
     · 触控 ≥44px · 输入框 ≥16px · 焦点必须可见 · 不只靠颜色 · 动效 150ms
*/

/* ============================================================
   A. 登录页：分屏
   ============================================================ */
.entry-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  max-inline-size: 1000px;
  margin-inline: auto;
  min-block-size: 76vh;
  padding: var(--space-5) var(--gutter) var(--space-9);
  align-items: center;
}

/* 左侧：只有灯和名字 */
.entry-quiet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-8) var(--space-7) 0;
  border-inline-end: var(--stroke-hairline) solid var(--border-subtle);
  min-block-size: 420px;
}
.entry-quiet .entry-lamp {
  flex: none;
  inline-size: 84px;
  block-size: 84px;
  display: block;
}
.entry-quiet .entry-lamp svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
/* 竖排标题：与书脊呼应 */
.entry-quiet .entry-title {
  margin: 0;
  font: 400 26px/1.3 var(--font-reading);
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* 右侧：表单 */
.entry-panel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-7) 0 var(--space-7) var(--space-9);
}
.entry-form-wrap {
  inline-size: 100%;
  max-inline-size: 330px;
}
.entry-h2 {
  font-family: var(--font-ui);
  font-size: var(--font-size-2);
  font-weight: 500;
  margin: 0 0 var(--space-1);
}
.entry-sub {
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-label);
  color: var(--text-muted);
}

/* 认证失败提示（中性措辞，不透露账号是否存在） */
.entry-flash {
  margin: 0 0 var(--space-4);
  padding: var(--space-2-5) var(--space-3-5);
  background: #fbf0ec;
  border-inline-start: 2px solid var(--danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.entry-flash p {
  margin: 0;
  font-size: var(--font-size-label);
  line-height: 1.7;
  color: var(--danger);
}
.entry-flash p:not(:last-child) { margin-block-end: var(--space-1); }

/* 表单：8px 网格 + 接近性原则
   标签↔输入框 8px（最相关）· 字段间 20px · 表单↔按钮 24px */
.entry-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.entry-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.entry-field label {
  display: block;
  margin: 0;
  font: 500 var(--font-size-label)/1.4 var(--font-ui);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

/* 输入框：≥16px 防 iOS 缩放；≥44px 触控目标 */
.entry-field input:not([type=checkbox]):not([type=hidden]) {
  inline-size: 100%;
  min-block-size: 44px;
  margin: 0;
  padding: 10px 14px;
  font: 400 var(--font-size-0)/1.5 var(--font-ui);
  color: var(--text-primary);
  background: var(--surface-canvas);
  border: var(--stroke-hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.entry-field input::placeholder { color: var(--text-muted); }
.entry-field input:hover { border-color: var(--border-subtle); }
/* 焦点：外发光 + 边框变色（双重变化，不只靠颜色） */
.entry-field input:focus {
  outline: none;
  border-color: var(--action-primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.20);
}
.entry-field input[aria-invalid="true"] { border-color: var(--danger); }
.entry-field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(160, 58, 34, 0.18); }
/* 自动填充：统一背景（浏览器默认会变黄） */
.entry-field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-canvas) inset;
  -webkit-text-fill-color: var(--text-primary);
}

/* 密码行 */
.entry-pw-row {
  display: flex;
  gap: var(--space-1);
  align-items: stretch;
}
.entry-pw-row input { flex: 1; min-inline-size: 0; }
.entry-toggle-pw {
  flex: none;
  inline-size: 44px;
  display: grid;
  place-items: center;
  background: var(--surface-subtle);
  color: var(--text-muted);
  border: var(--stroke-hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 15px;
  cursor: pointer;
  transition: background 150ms ease;
}
.entry-toggle-pw:hover { color: var(--text-secondary); }
.entry-toggle-pw:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.20);
}

/* Caps Lock 提示：不是错误，所以不用红色 */
.entry-caps {
  display: none;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--font-size-meta);
  line-height: 1.6;
  color: var(--text-muted);
}
.entry-caps.is-on { display: flex; }

/* 主按钮：与输入框等宽 */
.entry-submit {
  inline-size: 100%;
  min-block-size: 44px;
  margin: 0;
  padding: 12px 20px;
  font: 500 var(--font-size-ui)/1.5 var(--font-ui);
  color: var(--surface-canvas);
  background: var(--text-primary);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms ease;
}
.entry-submit:hover { background: var(--action-primary); }
.entry-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.32);
}
.entry-submit[aria-busy="true"],
.entry-submit:disabled { opacity: 0.6; cursor: progress; }

.entry-footnote {
  margin: var(--space-5) 0 0;
  font-size: var(--font-size-meta);
  line-height: 1.7;
  color: var(--text-muted);
}

/* ============================================================
   B. 改密码页：仍是居中卡片（该页模板用 .entry-space + .entry-card）
   这组类同时给登录页以外的场合兜底，所以保留并补齐上一轮的改进。
   ============================================================ */
.entry-space {
  min-block-size: 60vh;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--gutter);
}
.entry-card {
  inline-size: min(400px, 100%);
  padding: var(--space-7) var(--space-6);
  background: var(--surface-canvas);
  border: var(--stroke-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
}

/* ============================================================
   C. 窄屏：登录页折成单列，左侧转横排
   ============================================================ */
@media (max-width: 880px) {
  .entry-split {
    grid-template-columns: 1fr;
    min-block-size: auto;
    padding: var(--space-4) var(--space-5) var(--space-7);
  }
  .entry-quiet {
    flex-direction: row;
    gap: var(--space-5);
    justify-content: center;
    min-block-size: auto;
    padding: var(--space-6) 0;
    border-inline-end: 0;
    border-block-end: var(--stroke-hairline) solid var(--border-subtle);
  }
  .entry-quiet .entry-lamp { inline-size: 52px; block-size: 52px; }
  .entry-quiet .entry-title {
    writing-mode: horizontal-tb;
    font-size: var(--font-size-2);
    letter-spacing: 0.06em;
  }
  .entry-panel {
    padding: var(--space-6) 0 0;
    justify-content: center;
  }
  .entry-form-wrap { max-inline-size: 360px; }
}