/* @layer ui — 自序账号门与基准按钮。
 *
 * 为什么单独成文件：主窗（index.html）与浮窗（widget.html）都会渲染同一个
 * ui/components/session-gate.js，但浮窗从不加载 base.css——于是同一张登录门在浮窗里
 * 是一段没有样式的裸文字。把门和它用到的 .btn 基准搬到这里，两页各 link 一次。
 *
 * 这是**纯搬运**：下面两节逐字来自 base.css，内部顺序不变；index.html 里它紧跟在
 * base.css 之后加载，相对其它样式表的层叠顺序与搬运前完全一致。
 * 「按钮」一节整节搬（含 --danger / --block / --sm）而不是只搬三条：.btn--danger-ghost
 * 必须排在 .btn--ghost 之后才能压住它的字色；boot-guard 给浮窗补的重连键用的是 --sm。 */

/* ---------------- 按钮 ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--fs-body);
  font-weight: 560;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--spring-press-dur) var(--spring-press);
}
.btn:active:not(:disabled) { transform: scale(var(--press-scale)); transition: transform var(--dur-press) var(--ease); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--accent-glow);
}
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn--ghost {
  border-color: var(--border-strong);
  background: var(--raised-grad);
  color: var(--text);
}
.btn--ghost:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }

.btn--danger-ghost { color: var(--danger); }
.btn--danger-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 10%, transparent); }
/* 深色下 --danger 是 #ff7a6b，压白字只有 2.6:1。深色改压一层近黑的红，6.8:1。 */
.btn--danger { background: var(--danger); color: light-dark(#fff, hsl(8 45% 12%)); box-shadow: 0 1px 3px color-mix(in srgb, var(--danger) 28%, transparent); }
.btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 88%, #000); }

.btn--block { width: 100%; }
.btn--sm { min-height: 29px; font-size: var(--fs-tiny); padding: 0 11px; align-self: flex-start; }

/* ---------------- 自序账号门 ---------------- */
.session-gate { min-height: 100%; display: grid; place-items: center; padding: clamp(20px, 5vw, 64px); background: var(--bg); }
.session-gate__paper { width: min(100%, 480px); padding: clamp(28px, 5vw, 56px); background: var(--surface); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow-inset); }
.session-gate__mark { width: 40px; display: grid; gap: 5px; margin-bottom: 30px; transform: skewY(-10deg); }
.session-gate__mark i { height: 6px; border-radius: 2px; background: #cf432d; }
.session-gate__mark i:nth-child(2) { width: 30px; }
.session-gate__mark i:nth-child(3) { width: 20px; }
.session-gate__brand { display: flex; gap: 12px; align-items: baseline; font-size: var(--fs-lead); font-weight: 600; margin: 0 0 24px; }
.session-gate__brand span { color: var(--text-muted); font-weight: 400; }
.session-gate h1 { font-size: clamp(var(--fs-title), 3vw, var(--fs-display)); line-height: 1.4; letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance; }
.session-gate__description { color: var(--text-muted); line-height: 1.8; font-size: var(--fs-lead); margin: 0 0 30px; }
.session-gate__login { width: 100%; min-height: 48px; display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; }
.session-gate__privacy { font-size: var(--fs-tiny); color: var(--text-muted); text-align: center; margin: 16px 0 0; }
.session-gate__progress { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body); min-height: 48px; color: var(--text-muted); }
.session-gate__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: session-pulse var(--loop-wait) ease-in-out infinite; }
.session-gate--compact { padding: 20px; }
.session-gate--compact .session-gate__paper { padding: 28px; }
@keyframes session-pulse { 50% { opacity: .35; transform: scale(.85); } }
@media (prefers-reduced-motion: reduce) { .session-gate__pulse { animation: none; } }