/* =========================================================
   MandarinMiles · 移动端折叠披露组件（mm-collapse）
   ---------------------------------------------------------
   用途：把「宣传性 / 装饰性 / 与核心任务无关」的内容在窄屏收起，
        访客点一下即可展开查看。

   设计原则（2026-11-13）：
     · 桌面端完全不受影响 —— 折叠按钮在 >700px 隐藏，正文永远展开。
     · 渐进增强 —— 折叠状态由 JS 写入 data-collapsed；
       JS 不可用时全部内容照常展开（与改造前一致，不会白屏）。
     · 无障碍 —— 用真 <button> + aria-expanded + aria-controls，
       不用 display:none 藏内容以外的语义（展开后内容立即可读、可被读屏器访问）。
   ========================================================= */

/* 折叠按钮：桌面隐藏 */
.mm-collapse-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 11px 16px;
	margin: 0 0 12px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
	color: var(--primary, #1166F0);
	background: var(--brand-tint, #EAF2FE);
	border: 1px solid color-mix(in srgb, var(--primary, #1166F0) 22%, transparent);
	border-radius: 12px;
	transition: background .2s ease, transform .15s ease;
}
.mm-collapse-toggle:hover {
	background: color-mix(in srgb, var(--primary, #1166F0) 13%, var(--card, #fff));
}
.mm-collapse-toggle:active { transform: translateY(1px); }
.mm-collapse-toggle:focus-visible {
	outline: 2px solid var(--primary, #1166F0);
	outline-offset: 2px;
}

/* 折叠箭头（纯 CSS 三角，展开时旋转 180°） */
.mm-collapse-toggle::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .22s ease;
}
.mm-collapse[data-collapsed="0"] .mm-collapse-toggle::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

@media (max-width: 700px) {
	/* 窄屏才出现折叠按钮 */
	.mm-collapse-toggle { display: flex; }

	/* 收起态：正文隐藏 */
	.mm-collapse[data-collapsed="1"] > .mm-collapse-body { display: none; }
}