@charset "utf-8";

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

html {
	--pi: 3.14159265359;
	--sqrt2: 1.41421356237;
	--sqrt3: 1.73205080757;
	--golden-ratio: 1.61803398875;

	margin: 0;
	padding: 0;

	scrollbar-gutter: stable; /*为滚动条预留空间，防止滚动条在出现/隐藏间切换时影响内容宽高计算变化*/
	scroll-behavior: smooth; /*跳转至锚点时平滑滚动，而非突然跳走*/

	text-size-adjust: 100%; /*iOS 横屏字体放大问题：保持字体尺寸稳定*/

	/* 安全策略 */
	block-size: unset; /* 防止某些浏览器怪异模式 */

	/* macOS 上字体锯齿感
		不同浏览器字体渲染差异
	*/
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:root {
	--top-z: 9999;
	--modal-z: 1010;
	--dangerous-color: #D32F2F;
	--correct-color: #4CAF50;
	--incorrect-color: #F05C6A;
	--half-correct-color: #FF9800;
}

body {
	max-inline-size: 100%;
	min-height: 100vh; /* 确保布局撑满视口高度 */
	margin: 0;
	padding: 0;

	background-color: #F5F5F5;

	line-height: 1.6; /*1.6是可读性最佳行高*/
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	text-rendering: optimizeLegibility; /*精细字体细节*/
	overflow-wrap: break-word; /*允许在单词内换行（避免溢出）*/
	hyphens: auto; /*自动添加连字符（西文）*/
	image-rendering: optimize-contrast; /*高清图片渲染*/

	touch-action: manipulation; /*移动端点击延迟问题：立即响应触摸事件*/
}

/* ======================== 设定一些元素的初始值 ======================== */

h1, h2, h3 {
	text-wrap: balance;/* 保证换行时每行字数相当，避免头重脚轻 */
	color: #333;
}

textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #DDD;
	border-radius: 4px;
	resize: vertical;
}

button {
	cursor: pointer;
	transition: background-color 0.3s;
}

i.icon {
	font-style: unset; /* <i>标签本来是做斜体的，但现在通常被用来做图标，因此要去掉本身的斜体。 */
}

svg {
	/* svg线段端点改为圆头，更柔和 */
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* 有必填项未填的表单加红框 */
form:has(input:invalid:not(:placeholder-shown)) {
	border: 2px solid #f56c6c;
}

/* ======================== 一些组件 ======================== */

/* ================== 凹陷按钮开关 ==================
 * 可以简单地使用以下代码构造一个"弹起（未按下）/凹陷（按下）"式按钮开关：
	<label class="toggle btn">
		<input type="checkbox" />
		<span class="text when-on">凹陷</span>
		<span class="text when-off">弹起</span>
	</label>
	入口：label.toggle.btn

	span.text.when-on为“凹陷（按下）”状态时显示的文字。
	span.text.when-off为“弹起（未按下）”状态时显示的文字。
	也可以不写类，此时按span的顺序，第一个是“凹陷（按下）”状态时显示的文字，第二个是“弹起（未按下）”状态时显示的文字。
 */
label.toggle.btn {
	display: inline-flex;
	cursor: pointer;

	/* 隐藏 checkbox 但保留交互 */
	> input[type="checkbox"] {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
		margin: 0;
	}

	/* 共享基础按钮外观（弹起状态） */
	> span {
		display: inline-block;
		padding: 6px 12px;
		background: #e8e8e8;
		color: #333;
		border: 1px solid #bbb;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
		transition: all 0.2s ease;

		/* 点击微动效 */
		&:active {
			transform: scale(0.98);
		}
	}

	/* 方式A：显式类名 .text.when-off / .text.when-on */
	> span.text.when-on {
		display: none;
	}

	&:has(> input:checked) {
		> span.text.when-on {
			display: inline-block;
			background: #a0a0a0;
			border-color: #888;
			box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
		}
		> span.text.when-off {
			display: none;
		}
	}

	/* 方式B：无显式类名时按 DOM 位置降级 */
	&:not(:has(> span.text.when-off)):not(:has(> span.text.when-on)) {
		> span:first-of-type {
			display: none;
		}

		&:has(> input:checked) {
			> span:first-of-type {
				display: inline-block;
				background: #a0a0a0;
				border-color: #888;
				box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
			}
			> span:first-of-type ~ span {
				display: none;
			}
		}
	}

	/* 禁用状态 */
	&:disabled > input ~ span,
	> input:disabled ~ span {
		opacity: 0.5;
		cursor: not-allowed;
		transform: none;
	}

	/* 键盘焦点指示器（可访问性） */
	> input:focus-visible ~ span {
		outline: 2px solid #666;
		outline-offset: 2px;
	}
}

/* ======================== 一些工具类 ======================== */

/* ================== 可见性 ================== */
template, .template, .hidden, [v-cloak], .js.container {display: none !important;}

/* 视觉隐藏（仍可被读屏访问，用于无障碍时隐藏控件） */
.invisible {
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0;
	padding: 0;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0;
	opacity: 0 !important;
	pointer-events: none;
}

/* 不可交互（视觉可见，但不响应鼠标事件，让点击穿透到下层） */
.non-interactive {
	pointer-events: none;
	cursor: default;
}

/* 最高层级（盖在所有元素之上） */
.top-layer { z-index: var(--top-z); }

.position-fixed {
	position: fixed;
}

.sticky {
	position: sticky;

	&:is(nav) {top: 0;}
	&:is(footer) {bottom: 0;}
}

/* ================== 尺寸 ================== */
/* ------ 可拖放调整大小的元素 ------ */
.resizable {
	display: block; /* 确保是块级元素 */
	overflow: auto; /* 必须设置且不能是visible */
	resize: both;

	&.x {resize: horizontal;}
	&.y {resize: vertical;}
}

/* 铺满视口（position: fixed），用于弹层内全屏遮罩、撒花等 */
.fullscreen {
	position: fixed !important;
	inset: 0 !important;
}

.scrollable {overflow: auto; min-height: 0; min-width: 0;}

/* 禁止该元素内部滚动（overflow: hidden）；加在 body 上可避免整页出现滚动条 */
.no-scroll {overflow: hidden;}

/* ================== 背景 ================== */
.background {
	&.correct {background-color: var(--correct-color);}
	&.incorrect {background-color: var(--incorrect-color);}
	&.half-correct {background-color: var(--half-correct-color);}
	&.dangerous {background-color: var(--dangerous-color);}
}

/* ================== 文字 ================== */
.text {
	&.correct {color: var(--correct-color);}
	&.incorrect {color: var(--incorrect-color);}
	&.half-correct {color: var(--half-correct-color);}
	&.dangerous {color: var(--dangerous-color);}

	/* &.left {text-align: left;}
	&.center {text-align: center;}
	&.right {text-align: right;} */

	&.normal {font-weight: 400;}
	&.medium {font-weight: 500;}
	&.semi-bold {font-weight: 600;}
	&.bold {font-weight: 700;}

	/* 长文本隐藏 */
	&.hide.long {
		min-width: 0;/* min-width默认值auto，会导致元素不能缩小到比内容更小。改为0才能决定它“能被压缩”。 */
		flex-shrink: 1;/* 在flex下，确保“要压缩”。 */
		overflow: hidden;/* 选择：超出部分隐藏 */
		white-space: nowrap;
		/* 鼠标指向时显示全文 */
		&:hover {
			overflow: visible;
			text-overflow: inherit;
		}
		/* 可选子类.ellipsis：结尾加个省略号 */
		&.ellipsis {text-overflow: ellipsis;}
	}

	& strong {color: red;/* 纯红的字是不是太扎眼了？也许用其他强调方式更好？ */}
}

.em-as-10x-px {
	font-size: 62.5%; /* 浏览器默认字号16px，62.5%即10px，这样可令1em=10px，方便换算 */
}

/* ======================== 模态遮罩 ======================== */
.modal {
	--modal-overlay-color: rgba(0,0,0,0.5);
	position: absolute;
	inset: 0;
	z-index: var(--modal-z);
	background: var(--modal-overlay-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============ 列表容器 ============ */
:where(:not(ol, ul)).list {/* 本身用ol/ul的，随它去 */
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: 0.5rem;
	margin: 0;

	> header {
		font-weight: 600;
		margin-bottom: 0.5rem;
	}

}

li.one:nth-child(odd) {
	background: #f5f7fa;
}

/* ============ 杂项 ============ */