/* ==========================================================================
   WX App Suite — 网页扫码登录组件样式
   --------------------------------------------------------------------------
   设计约束：
   - 不引入任何外部字体/图标库，避免增加请求与隐私面。
   - 尺寸用 rem，跟随用户浏览器的字号设置（可访问性）。
   - 颜色取自主题变量并给出稳妥回退，不硬编码品牌色 ——
     这是要嵌进客户自己主题的组件，硬编码主色会与主题冲突。
   - 深色模式用 prefers-color-scheme 适配，不用 JS 判断。
   ========================================================================== */

/*
 * 变量定义挂在 .wxas-login **与** .wxas-modal 两个选择器上。
 *
 * login.js 会把弹层节点 portal 到 body 下（原因见 .wxas-modal 规则的
 * 注释），此后 .wxas-modal 不再是 .wxas-login 的后代 —— 若变量仍只定义
 * 在 .wxas-login 上，弹层的 background/color 全部失去解析结果：
 * .wxas-modal__box 的白底消失（透明框）、边框与主色退化为浏览器默认，
 * 深色模式下更是一团黑。选择器多挂一个类，两种挂载位置（portal 前在
 * 组件内、portal 后在 body 下）都能自持变量。
 */
.wxas-login,
.wxas-modal {
	--wxas-border: var(--wp--preset--color--contrast-3, #dcdcde);
	--wxas-text: var(--wp--preset--color--contrast, #1d2327);
	--wxas-muted: #646970;
	--wxas-bg: var(--wp--preset--color--base, #fff);
	--wxas-subtle: #f6f7f7;
	--wxas-primary: var(--wp--preset--color--primary, #2271b1);
	--wxas-danger: #d63638;
	--wxas-radius: 6px;
}

.wxas-login {
	max-width: 24rem;
	margin: 0 auto;
	padding: 1.5rem;
	border: 1px solid var(--wxas-border);
	border-radius: var(--wxas-radius);
	background: var(--wxas-bg);
	color: var(--wxas-text);
	box-sizing: border-box;
}

.wxas-login *,
.wxas-login *::before,
.wxas-login *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------ hidden 兜底 */
/*
 * ⚠️ 本规则**不可删除**，它是整个组件的显隐开关。
 *
 * HTML 的 `hidden` 属性在 UA 样式表里只是 `[hidden] { display: none }`，
 * 优先级 = 属性选择器 (0,1,0)。本文件下方给 `.wxas-modal` /
 * `.wxas-qr__overlay` / `.wxas-btn` 等写了 `display: flex|inline-flex`
 * （类选择器同样是 (0,1,0)），**且作者样式表恒优先于 UA 样式表** ——
 * 于是 `hidden` 属性被静默架空：写在 HTML 里的 `hidden`、以及 JS 里的
 * `el.hidden = true`，全部不再产生任何视觉效果。
 *
 * 现场表现（曾误判为「逻辑顺序不对」）：
 *   页面一打开，信息完善弹窗就直接盖在登录框上且点关闭无效 ——
 *   因为弹窗从来就没被隐藏过，`hideModal()` 设的 `hidden` 也不生效；
 *   遮罩层 `.wxas-modal__backdrop` 更是永久拦截了所有点击，
 *   账号密码 / 扫码两个 tab 因此完全点不动。
 *
 * 注意：`display: none !important` 不能降级成不带 `!important` 的写法 ——
 * 那样它又回到 (0,1,0) 的平局，胜负取决于源码先后顺序，
 * 而下方的 `.wxas-modal` 规则就在后面。这也正是它必须带 `!important` 的原因。
 *
 * 选择器同时覆盖 `.wxas-modal [hidden]` 与 `.wxas-modal[hidden]`：
 * login.js 会把弹层 portal 到 body 下（见 .wxas-modal 规则的注释），
 * 之后弹层不再是 .wxas-login 的后代，本规则前半段管不到它 ——
 * 不补这两段的话，弹层与它内部的隐藏元素（错误提示、第二个表单）
 * 会直接失去 hidden 兜底，重演「弹窗关不掉」的历史故障。
 */
.wxas-login [hidden],
.wxas-modal [hidden],
.wxas-modal[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- 模式切换 */

.wxas-login__tabs {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 1.25rem;
	padding: 0.25rem;
	background: var(--wxas-subtle);
	border-radius: var(--wxas-radius);
}

.wxas-login__tab {
	flex: 1;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--wxas-muted);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.wxas-login__tab:hover {
	color: var(--wxas-text);
}

.wxas-login__tab.is-active {
	background: var(--wxas-bg);
	color: var(--wxas-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.wxas-login__tab:focus-visible {
	outline: 2px solid var(--wxas-primary);
	outline-offset: 1px;
}

/* -------------------------------------------------------------------- 表单 */

.wxas-field {
	display: block;
	margin-bottom: 1rem;
}

.wxas-field__label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wxas-muted);
}

.wxas-field input {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--wxas-border);
	border-radius: 4px;
	background: var(--wxas-bg);
	color: var(--wxas-text);
	font-size: 0.9375rem;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wxas-field input:focus {
	border-color: var(--wxas-primary);
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.15);
	outline: none;
}

.wxas-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	font-size: 0.875rem;
	color: var(--wxas-muted);
	cursor: pointer;
}

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

.wxas-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.6875rem 1rem;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.wxas-btn--primary {
	background: var(--wxas-primary);
	color: #fff;
}

.wxas-btn--primary:hover {
	filter: brightness(0.92);
	color: #fff;
}

.wxas-btn--primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.wxas-btn--ghost {
	width: auto;
	padding: 0.5rem 0.875rem;
	border-color: var(--wxas-border);
	background: transparent;
	color: var(--wxas-text);
	font-size: 0.875rem;
}

.wxas-btn--ghost:hover {
	background: var(--wxas-subtle);
}

.wxas-btn:focus-visible {
	outline: 2px solid var(--wxas-primary);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ 二维码 */

.wxas-qr {
	text-align: center;
}

.wxas-qr__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 13.75rem;
	height: 13.75rem;
	margin: 0 auto 1rem;
	border: 1px solid var(--wxas-border);
	border-radius: var(--wxas-radius);
	background: var(--wxas-subtle);
	overflow: hidden;
}

.wxas-qr__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
}

.wxas-qr__placeholder {
	padding: 1rem;
	color: var(--wxas-muted);
	font-size: 0.8125rem;
}

/*
 * ⚠️ 这里**故意不改成**底座的公共类 `.wxas-qrbox__overlay`（assets/qrbox.css）。
 *
 * 登录码是「刷新按钮盖在码上」这个形态的**出处**，其余四处（付费墙 / 授权卡 /
 * 内容锁 / 用户中心绑定）已经改成共用 qrbox.css 的公共类，唯独登录码保留自己的
 * 实现，原因是下面那条深色模式覆盖：
 *
 *     .wxas-qr__overlay { background: rgba(29, 35, 39, 0.95); }   ← 深色主题
 *
 * 公共类刻意**固定白底**（理由见 qrbox.css：二维码必须白底黑码，
 * 深色遮罩压住白色码框会割裂）；登录码在这里选择了相反的处理。
 * 两者是**有意的设计分歧**，不是漏改 —— 合并前必须先决定哪种更优，
 * 别当成重复代码直接删掉。
 */
.wxas-qr__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1rem;
	background: rgba(255, 255, 255, 0.94);
	text-align: center;
}

.wxas-qr__overlay-text {
	color: var(--wxas-text);
	font-size: 0.875rem;
	font-weight: 500;
}

.wxas-qr__hint {
	margin: 0 0 0.5rem;
	color: var(--wxas-muted);
	font-size: 0.8125rem;
	line-height: 1.6;
}

.wxas-qr__status {
	margin: 0;
	min-height: 1.25rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wxas-primary);
}

.wxas-qr__status.is-error {
	color: var(--wxas-danger);
}

.wxas-qr__timer {
	margin: 0.5rem 0 0;
	color: var(--wxas-muted);
	font-size: 0.75rem;
}

/* ------------------------------------------------------------------ 弹层 */

/*
 * 本节点运行时由 login.js 搬到 body 下（portal），因此：
 *   - fixed 的包含块恒为视口，不受小工具侧边栏里任何
 *     transform/filter/will-change 祖先的劫持，遮罩恒为全屏；
 *   - CSS 变量与 [hidden] 兜底由本文件里的 .wxas-modal 选择器
 *     自持（见文件头与 hidden 兜底段的注释）。
 */
.wxas-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.wxas-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.wxas-modal__box {
	position: relative;
	width: 100%;
	max-width: 22rem;
	max-height: 90vh;
	overflow-y: auto;
	padding: 1.5rem;
	border-radius: var(--wxas-radius);
	background: var(--wxas-bg);
	color: var(--wxas-text);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}

.wxas-modal__title {
	margin: 0 0 0.375rem;
	font-size: 1.125rem;
	font-weight: 600;
}

.wxas-modal__desc {
	margin: 0 0 1rem;
	color: var(--wxas-muted);
	font-size: 0.8125rem;
	line-height: 1.6;
}

/* ------------------------------------------------- 弹层内的两条绑定路径 */

/*
 * 样式刻意与顶部的 `.wxas-login__tabs` 同构（同样的底色、圆角、激活态），
 * 但**不用同一个类名**：顶部那组 tab 是「账号密码 / 小程序扫码」，
 * 这组是「绑定已有账号 / 注册新账号」，语义完全不同。
 * 共用类名会让将来任何一处的样式调整都意外影响另一处，
 * 而它们在视觉上恰恰应该保持一致 —— 这种「看起来相同、改起来必须分开」
 * 的约束，用两个类名表达最清楚。
 */
.wxas-modal__tabs {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 1rem;
	padding: 0.25rem;
	background: var(--wxas-subtle);
	border-radius: var(--wxas-radius);
}

.wxas-modal__tab {
	flex: 1;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--wxas-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.wxas-modal__tab:hover {
	color: var(--wxas-text);
}

.wxas-modal__tab.is-active {
	background: var(--wxas-bg);
	color: var(--wxas-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.wxas-modal__tab:focus-visible {
	outline: 2px solid var(--wxas-primary);
	outline-offset: 1px;
}

.wxas-modal__error {
	margin: 0 0 1rem;
	padding: 0.625rem 0.75rem;
	border-left: 3px solid var(--wxas-danger);
	background: rgba(214, 54, 56, 0.07);
	color: var(--wxas-danger);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* --------------------------------------------------------------- 已登录态 */

.wxas-account {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-bottom: 1rem;
}

.wxas-account__avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.wxas-account__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wxas-account__name {
	font-size: 0.9375rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wxas-account__email {
	color: var(--wxas-muted);
	font-size: 0.8125rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wxas-account__badge {
	margin-left: auto;
	padding: 0.1875rem 0.5rem;
	border-radius: 999px;
	background: var(--wxas-subtle);
	color: var(--wxas-muted);
	font-size: 0.6875rem;
	white-space: nowrap;
}

.wxas-account__badge.is-bound {
	background: rgba(0, 112, 23, 0.1);
	color: #007017;
}

.wxas-account__meta {
	margin: 0 0 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wxas-border);
	color: var(--wxas-muted);
	font-size: 0.75rem;
	line-height: 1.7;
}

.wxas-account__actions {
	display: flex;
	gap: 0.5rem;
}

/* --------------------------------------------------------------- 深色模式 */

@media (prefers-color-scheme: dark) {
	/*
	 * .wxas-modal 与 .wxas-login 并列：弹层被 portal 到 body 下后
	 * （见文件头变量块的注释），深色变量必须由它自己携带。
	 */
	.wxas-login,
	.wxas-modal {
		--wxas-border: #3c434a;
		--wxas-text: #f0f0f1;
		--wxas-muted: #a7aaad;
		--wxas-bg: #1d2327;
		--wxas-subtle: #2c3338;
		--wxas-primary: #72aee6;
	}

	.wxas-login__tab.is-active,
	.wxas-modal__tab.is-active {
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	}

	.wxas-qr__img {
		background: #fff;   /* 二维码必须白底，否则扫不出 */
	}

	.wxas-qr__overlay {
		background: rgba(29, 35, 39, 0.95);
	}

	.wxas-account__badge.is-bound {
		background: rgba(0, 208, 130, 0.15);
		color: #4ab866;
	}
}

/* ----------------------------------------------------------------- 响应式 */

@media (max-width: 480px) {
	.wxas-login {
		padding: 1.25rem;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}

	.wxas-qr__stage {
		width: 11.25rem;
		height: 11.25rem;
	}
}

/* 尊重用户的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
	.wxas-login button,
	.wxas-login input {
		transition: none;
	}
}