/**
 * MOK 会员中心：只在会员页面加载。
 *
 * 配色、圆角、间距一律走 theme.json 的 preset / custom token
 * （var(--wp--preset--color--*) / var(--wp--custom--radius--*)），
 * 这里不写任何硬编码色值；也不使用 !important —— 需要覆盖时提高选择器精度即可。
 *
 * @package mok-enterprise-member
 */

.mok-member {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
}

.mok-member-notice {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
}

.mok-member-notice--success {
	border-color: var(--wp--preset--color--primary);
}

.mok-member-notice--error {
	border-color: var(--wp--preset--color--muted);
}

.mok-member-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	max-width: 32rem;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}

.mok-member-form__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h3);
	line-height: 1.3;
}

.mok-member-field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.mok-member-field label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.mok-member-field input {
	width: 100%;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font: inherit;
}

.mok-member-field input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/*
 * 错误态字段（F-022）：服务端把 aria-invalid="true" 写在出错字段上，
 * 这里给出可见的边框与目标字符，颜色仍来自 theme.json 的调色板。
 */
.mok-member-field input[aria-invalid="true"],
.mok-member-field select[aria-invalid="true"],
.mok-member-field textarea[aria-invalid="true"] {
	border-color: var(--wp--preset--color--vivid-red);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--vivid-red);
}

.mok-member-actions {
	margin: 0;
}

.mok-member-hint {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	overflow-wrap: anywhere;
}

.mok-member-summary {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.mok-member-summary__line {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
}

@media (max-width: 781px) {
	.mok-member-form {
		max-width: none;
		padding: var(--wp--preset--spacing--40);
	}
}

/* ---------------------------------------------------- 会员中心布局（F-005 ~ F-008） */
/*
 * 两栏：左导航固定 240px + 右内容 minmax(0,1fr)。
 * 右列用 minmax(0,…) 而不是 1fr，长订单号 / 长标题不会把栅格撑破。
 * ≤781px 单列，导航折叠成顶部抽屉。
 */
.mok-member-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	min-width: 0;
}

.mok-member-content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

.mok-member-nav {
	min-width: 0;
}

.mok-member-nav__summary {
	display: none;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.mok-member-nav__summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.mok-member-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-member-nav__link {
	display: block;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-decoration: none;
}

.mok-member-nav__link:hover {
	background: var(--wp--preset--color--surface);
}

.mok-member-nav__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.mok-member-nav__link[aria-current="page"] {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--border);
	font-weight: 600;
}

.mok-member-view__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-3, 22px);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

.mok-member-panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.mok-member-panel {
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	min-width: 0;
}

.mok-member-panel > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.mok-member-panel__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large, 20px);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

.mok-member-kv {
	display: grid;
	grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.mok-member-kv dt {
	color: var(--wp--preset--color--muted);
}

.mok-member-kv dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

.mok-member-list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	overflow-wrap: anywhere;
}

.mok-member-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.mok-member-table th,
.mok-member-table td {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.mok-member-table th {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.mok-member-pager {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}

.mok-member-pager__link {
	display: inline-block;
	min-width: 36px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	text-decoration: none;
}

.mok-member-pager__link.is-current {
	border-color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.mok-member-avatar {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

.mok-member-avatar__image {
	width: 72px;
	height: 72px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	object-fit: cover;
}

.mok-member-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	cursor: pointer;
}

.mok-member-button:hover {
	border-color: var(--wp--preset--color--primary);
}

.mok-member-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.mok-member-favorite {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
}

.mok-member-favorite-form {
	margin: 0;
}

@media (max-width: 781px) {
	.mok-member-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.mok-member-nav__summary {
		display: block;
	}

	.mok-member-nav__drawer[open] > .mok-member-nav__list {
		margin-block-start: var(--wp--preset--spacing--30);
	}

	.mok-member-panels {
		grid-template-columns: minmax(0, 1fr);
	}

	.mok-member-panel {
		padding: var(--wp--preset--spacing--40);
	}

	/* 订单表格：窄屏改成「标签 + 值」的堆叠行，不靠横向滚动。 */
	.mok-member-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.mok-member-table,
	.mok-member-table tbody,
	.mok-member-table tr,
	.mok-member-table td {
		display: block;
		width: 100%;
	}

	.mok-member-table tr {
		padding: var(--wp--preset--spacing--30) 0;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.mok-member-table td {
		display: flex;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--30);
		padding: 4px 0;
		border: 0;
	}

	.mok-member-table td::before {
		content: attr(data-label);
		color: var(--wp--preset--color--muted);
	}
}

/* ---------------------------------------------------- sprint 3（F-009 ~ F-012） */
/*
 * 流水 / 等级对照表：宽表在容器内横向滚动（tabindex=0 时可键盘聚焦滚动），
 * 不用 overflow-x:hidden 掩盖溢出；数字列不换行。
 */
.mok-member-tablewrap {
	max-width: 100%;
	overflow-x: auto;
}

.mok-member-tablewrap:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.mok-member-table__num {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* 行内表单（VIP 等级行的「开通 / 续期」按钮）：不换行、不产生额外外边距。 */
.mok-member-inline-form {
	margin: 0;
}

/* 认证表单里的 select 与 input 视觉对齐。 */
.mok-member-field select {
	width: 100%;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font: inherit;
}

.mok-member-field select:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- 内容门槛提示块 */

/**
 * `[tbcontent]` 提示块（F-009 / F-010 / F-012）。
 *
 * - 圆角、间距、颜色一律走 theme.json token，不写死色值；
 * - 正文文字继承主题正文字号（不覆盖 font-size），保证与站点排版一致；
 * - 320px 视口下按钮高度 ≥40px、表单控件不撑破容器（不靠 overflow-x 掩盖）。
 */
.mok-gate {
	box-sizing: border-box;
	max-width: 100%;
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.mok-gate__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.mok-gate__text {
	margin: 0 0 var(--wp--preset--spacing--30);
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.mok-gate__actions {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
}

.mok-gate__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.mok-gate__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.mok-gate__field input,
.mok-gate__form input[type="text"],
.mok-gate__form input[type="password"],
.mok-gate__form input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 40px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font: inherit;
}

/*
 * 按钮规格统一（三张门槛卡必须同规格）：
 * - login 卡的登录提交、password 卡的「提交提取码」、buy 卡的「解锁全文」共用这一套
 *   字号 / 圆角 / 高度 / 配色，任何一张卡的自有样式都不再改写它们；
 * - 圆角走 theme.json token（6px 卡片圆角），配色只用 preset（primary 底 + white 字）；
 * - 高度按 16px 字号 × 1.4 行高 + 11px 上下内边距 + 1px 描边 ≈ 46px。
 */
.mok-gate__button,
.mok-gate__link,
.mok-gate .mok-member-form .mok-member-actions .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 46px;
	padding-block: 11px;
	padding-inline: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--card);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

/* 表单内的提交按钮与表单同宽：1280 与 390 下三张卡的按钮左右边界一致。 */
.mok-gate__form > .mok-gate__button,
.mok-gate .mok-member-form .mok-member-actions,
.mok-gate .mok-member-form .mok-member-actions .wp-element-button {
	width: 100%;
	max-width: 100%;
}

.mok-gate__button {
	border: 1px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* 门槛卡内嵌的登录表单提交按钮：覆盖站点 element button 的 0 圆角与 14px 字号。 */
.mok-gate .mok-member-form .mok-member-actions .wp-element-button {
	border: 1px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.mok-gate__link {
	border: 1px solid var(--wp--preset--color--primary);
	background: transparent;
	color: var(--wp--preset--color--primary);
}

.mok-gate__button:hover,
.mok-gate .mok-member-form .mok-member-actions .wp-element-button:hover {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
}

.mok-gate__button:focus-visible,
.mok-gate__link:focus-visible,
.mok-gate .mok-member-form .mok-member-actions .wp-element-button:focus-visible,
.mok-gate__form input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.mok-gate__notice {
	margin-block-start: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	font-size: var(--wp--preset--font-size--small);
	overflow-wrap: anywhere;
}

.mok-gate__notice--success {
	border-color: var(--wp--preset--color--primary);
}

.mok-gate__notice--error {
	border-color: var(--wp--preset--color--muted);
}

/* 提示块内嵌的登录表单：填满提示块，不再自带一层卡片边框。 */
.mok-gate .mok-member-form {
	width: 100%;
	max-width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
}

.mok-gate .mok-member-form__title {
	font-size: var(--wp--preset--font-size--lead);
}

/*
 * 本页已输出过登录表单时，后续同类门槛卡只给一行说明（data-mok-gate-compact）：
 * 视觉上弱化成提示条，左侧用 primary 强调条与站点卡片体系保持一致（颜色只用 preset）。
 */
.mok-gate[data-mok-gate-compact] {
	margin-block: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-inline-start-width: 3px;
	border-inline-start-color: var(--wp--preset--color--primary);
}

.mok-gate[data-mok-gate-compact] .mok-gate__title {
	margin-block-end: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--body);
}

.mok-gate[data-mok-gate-compact] .mok-gate__text {
	margin-block-end: 0;
}

@media (max-width: 480px) {
	.mok-gate {
		padding: var(--wp--preset--spacing--30);
	}

	.mok-gate__actions,
	.mok-gate__form {
		align-items: stretch;
		width: 100%;
	}

	.mok-gate__button,
	.mok-gate__link {
		width: 100%;
	}
}

/*
 * 页头 / 页脚账号入口（`[mok_member_account]`）。
 *
 * 位置：`.mok-header__tools` 内、电话之后、「免费咨询」按钮之前。
 * 目标：整组看起来是一个独立「账号区」，而不是两段正文碎片。
 * - 组内间距、与电话 / 按钮之间的间距全部走既有 spacing token；
 * - 字号对齐页头导航（body 16px），不再比导航小一档；
 * - hover / focus-visible 用 primary 并落 2px 底部主色条（不是抖动型 hover）；
 * - 当前所在页由短码输出的 `aria-current="page"` 驱动，主色 + 常亮底条；
 * - 无硬编码色值、无 !important；状态动画只动 transform / color，尊重 reduced-motion。
 */
/*
 * 双类名 + 子选择器：核心给 `.is-layout-flex > :is(*, div)` 输出 `margin: 0`，
 * 单类选择器会被它（0,1,1）压掉；这里沿用 theme.css 自身的双类名写法，不使用 !important。
 */
.mok-header__tools.mok-header__tools > .mok-header__account {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30);
	/* 与左侧电话之间额外让出一档间距（tools 自身还有 20px gap），边界清楚。 */
	margin-inline-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

.mok-header__account-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-block: 2px;
	color: var(--wp--preset--color--ink);
	font-size: inherit;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: color 160ms ease-out;
}

/* 底部提示条：hover / focus / 当前页共用一条 2px 主色线，避免每种状态各写一套。 */
.mok-header__account-link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 160ms ease-out;
}

.mok-header__account-link:hover,
.mok-header__account-link:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.mok-header__account-link:hover::after,
.mok-header__account-link:focus-visible::after {
	transform: scaleX(1);
}

.mok-header__account-link[aria-current="page"] {
	color: var(--wp--preset--color--primary);
}

.mok-header__account-link[aria-current="page"]::after {
	transform: scaleX(1);
}

/* 两个链接之间的分隔：1px 竖线落在 gap 正中，不额外占宽度、不参与点击。 */
.mok-header__account-link + .mok-header__account-link::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--wp--preset--spacing--30) / -2);
	top: 50%;
	width: 1px;
	height: 12px;
	margin-block-start: -6px;
	background: var(--wp--preset--color--muted);
	opacity: 0.45;
}

/* 页脚：落在「快捷链接」列末尾，沿用 `.mok-footer a` 的深底链接色，只补字号与触控高度。 */
.mok-footer__account {
	margin: 0;
}

.mok-footer__account-link {
	display: inline-block;
	padding-block: 2px;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
}

.mok-footer__account-link[aria-current="page"] {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

/* 页脚是深底：focus 轮廓用亮色，避免 primary 蓝落在 #202935 上对比度不足。 */
.mok-footer__account-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

@media (max-width: 781px) {
	/*
	 * ≤781：电话已收进「联系我们」，账号区成为页头栅格里的独立一行（品牌 + 按钮在同一行），
	 * 不需要与电话之间的额外留白；组内间距收到 8px 一档，分隔线随之居中。
	 * 字号保持 body，与页头其它文本同一档，不因为窄屏再缩一号。
	 */
	.mok-header .mok-header__tools > .mok-header__account {
		gap: var(--wp--preset--spacing--20);
		margin-inline-start: 0;
		justify-self: start;
	}
	.mok-header .mok-header__account-link + .mok-header__account-link::before {
		inset-inline-start: calc(var(--wp--preset--spacing--20) / -2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mok-header__account-link,
	.mok-header__account-link::after {
		transition: none;
	}
}