/* 
 * 物理模拟页面通用样式
 * Common styles for physics simulation pages
 * 所有物理模拟HTML文件共享的CSS样式
 * Shared CSS for all physics simulation HTML files
 * 文件位置 / Location: css/physics-simulation.css
 */

/* ===== 页面整体布局 / Page Layout ===== */

/* 页面主体样式 */
.sim-page-body {
	font-family: 'Microsoft YaHei', sans-serif;  /* 字体：微软雅黑 */
	background-color: #f5f5f5;  /* 背景色：浅灰 */
	color: #333;  /* 文字颜色：深灰 */
	min-height: 100vh;  /* 最小高度：全屏 */
	padding: 20px;  /* 内边距 */
}

/* 页面容器 */
.sim-page-container {
	width: 100%;  /* 宽度：100% */
	max-width: 1200px;  /* 最大宽度 */
	margin: 0 auto;  /* 居中显示 */
	background-color: white;  /* 背景色：白色 */
	border-radius: 10px;  /* 圆角 */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
	padding: 20px;  /* 内边距 */
}

/* 页面头部 */
.sim-page-header {
	text-align: center;  /* 文字居中 */
	margin-bottom: 30px;  /* 下边距 */
	padding-bottom: 15px;  /* 下内边距 */
	border-bottom: 2px solid #999;  /* 下边框：灰色线条 */
}

/* 页面标题 */
.sim-page-title {
	color: black;  /* 颜色：黑色 */
	font-size: 2.5rem;  /* 字体大小 */
	margin-bottom: 10px;  /* 下边距 */
	font-weight: normal;  /* 字体粗细：正常 */
}

/* ===== 控制面板 / Control Panel ===== */

/* 控制区域 */
.sim-controls {
	margin-bottom: 20px;  /* 下边距 */
	padding: 15px;  /* 内边距 */
	border-radius: 8px;  /* 圆角 */
}

/* 控制组 */
.sim-control-group {
	margin: 15px 0;  /* 上下边距 */
}

/* 控制标签 */
.sim-control-label {
	display: block;  /* 块级显示 */
	margin-bottom: 8px;  /* 下边距 */
	font-weight: bold;  /* 字体加粗 */
	color: #333;  /* 颜色：深灰 */
}

/* ===== 滑块样式 / Slider Styles ===== */

/* 滑块基础样式 */
.sim-slider,
input[type="range"] {
	width: 100%;  /* 宽度：100% */
	max-width: 300px; /* 最大宽度限制 */
	vertical-align: middle;  /* 垂直居中对齐 */
	cursor: pointer;  /* 鼠标指针：手形 */
	appearance: none;  /* 移除默认样式 */
	--fill-percent: 50%;  /* CSS变量：填充百分比，默认50% */
}

/* 响应式：手机竖屏模式下滑条宽度适配 */
@media (max-width: 768px) and (orientation: portrait) {
	.sim-slider,
	input[type="range"] {
		max-width: none; /* 改成自动占满容器宽度 */
	}
}

/* WebKit浏览器（Chrome, Safari, Edge）- 滑块轨道 */
.sim-slider::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;  /* 宽度 */
	height: 10px;  /* 高度 */
	border-radius: 5px;  /* 圆角 */
	/* 渐变背景：左侧填充蓝色，右侧未填充灰色 */
	background: linear-gradient(to right,
		#2575fc 0%,  /* 蓝色起点 */
		#2575fc var(--fill-percent),  /* 蓝色到填充百分比 */
		#f0f0f0 var(--fill-percent),  /* 灰色从填充百分比开始 */
		#f0f0f0 100%  /* 灰色到终点 */
	);
	border: 1px solid #ccc;  /* 边框：浅灰色 */
}

/* WebKit - 滑块轨道悬停效果 */
.sim-slider:hover::-webkit-slider-runnable-track,
input[type="range"]:hover::-webkit-slider-runnable-track {
	/* 悬停时颜色加深 */
	background: linear-gradient(to right,
		#1a5cc9 0%,  /* 深蓝色起点 */
		#1a5cc9 var(--fill-percent),  /* 深蓝色到填充百分比 */
		#e6e6e6 var(--fill-percent),  /* 深灰色从填充百分比开始 */
		#e6e6e6 100%  /* 深灰色到终点 */
	);
	border-color: #b3b3b3;  /* 边框颜色加深 */
}

/* WebKit浏览器 - 滑块滑块（拖动的圆点） */
.sim-slider::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;  /* 移除WebKit默认样式 */
	appearance: none;  /* 移除默认样式 */
	width: 18px;  /* 宽度 */
	height: 18px;  /* 高度 */
	border-radius: 50%;  /* 圆形 */
	background: #2575fc;  /* 背景色：蓝色 */
	margin-top: -4px;  /* 向上偏移，居中对齐轨道 */
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);  /* 阴影效果 */
	transition: background 0.3s;  /* 过渡动画 */
	cursor: pointer;  /* 鼠标指针：手形 */
}

/* WebKit - 滑块激活状态（按下时） */
.sim-slider:active::-webkit-slider-thumb,
input[type="range"]:active::-webkit-slider-thumb {
	background: #1a5cc9;  /* 按下时颜色加深 */
}

/* Firefox浏览器 - 滑块轨道 */
.sim-slider::-moz-range-track,
input[type="range"]::-moz-range-track {
	height: 10px;  /* 高度 */
	border-radius: 5px;  /* 圆角 */
	/* 渐变背景：同WebKit */
	background: linear-gradient(to right,
		#2575fc 0%,
		#2575fc var(--fill-percent),
		#f0f0f0 var(--fill-percent),
		#f0f0f0 100%
	);
	border: 1px solid #ccc;  /* 边框 */
}

/* Firefox - 滑块进度条（已填充部分） */
.sim-slider::-moz-range-progress,
input[type="range"]::-moz-range-progress {
	height: 10px;  /* 高度 */
	border-radius: 5px;  /* 圆角 */
	background: #2575fc;  /* 背景色：蓝色 */
}

/* Firefox - 滑块轨道悬停效果 */
.sim-slider:hover::-moz-range-track,
input[type="range"]:hover::-moz-range-track {
	/* 悬停时颜色加深 */
	background: linear-gradient(to right,
		#1a5cc9 0%,
		#1a5cc9 var(--fill-percent),
		#e6e6e6 var(--fill-percent),
		#e6e6e6 100%
	);
	border-color: #b3b3b3;  /* 边框颜色加深 */
}

/* Firefox - 滑块进度条悬停效果 */
.sim-slider:hover::-moz-range-progress,
input[type="range"]:hover::-moz-range-progress {
	background: #1a5cc9;  /* 悬停时颜色加深 */
}

/* Firefox浏览器 - 滑块滑块（拖动的圆点） */
.sim-slider::-moz-range-thumb,
/* Firefox浏览器 - 滑块滑块（拖动的圆点） */
.sim-slider::-moz-range-thumb,
input[type="range"]::-moz-range-thumb {
	width: 18px;  /* 宽度 */
	height: 18px;  /* 高度 */
	border-radius: 50%;  /* 圆形 */
	background: #2575fc;  /* 背景色：蓝色 */
	border: none;  /* 无边框 */
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);  /* 阴影效果 */
	transition: background 0.3s;  /* 过渡动画 */
	cursor: pointer;  /* 鼠标指针：手形 */
}

/* Firefox - 滑块激活状态（按下时） */
.sim-slider:active::-moz-range-thumb,
input[type="range"]:active::-moz-range-thumb {
	background: #1a5cc9;  /* 按下时颜色加深 */
}

/* ===== 按钮样式 / Button Styles ===== */

/* 主按钮 */
.sim-button {
	padding: 10px 20px;  /* 内边距 */
	font-size: 16px;  /* 字体大小 */
	background-color: #4CAF50;  /* 背景色：绿色 */
	color: white;  /* 文字颜色：白色 */
	border: none;  /* 无边框 */
	border-radius: 5px;  /* 圆角 */
	cursor: pointer;  /* 鼠标指针：手形 */
	transition: background-color 0.3s;  /* 过渡动画 */
	margin-right: 10px;  /* 右边距 */
}

/* 按钮悬停效果 */
.sim-button:hover {
	background-color: #45a049;  /* 悬停时颜色加深 */
}

/* 按钮禁用状态 */
.sim-button:disabled {
	background-color: #cccccc;  /* 灰色背景 */
	cursor: not-allowed;  /* 鼠标指针：禁止 */
}

/* 次要按钮 */
.sim-button-secondary {
	background-color: #2196F3;  /* 背景色：蓝色 */
}

/* 次要按钮悬停效果 */
.sim-button-secondary:hover {
	background-color: #0b7dda;  /* 悬停时颜色加深 */
}

/* ===== 信息面板 / Info Panel ===== */

/* 信息面板 */
.sim-info-panel {
	background-color: #f0f8ff;  /* 背景色：淡蓝色 */
	padding: 15px;  /* 内边距 */
	border-radius: 8px;  /* 圆角 */
	margin-top: 20px;  /* 上边距 */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);  /* 阴影效果 */
}

/* ===== 物理原理（各页面通用样式） ===== */
/* 使用类名 .physics-principle 并兼容历史类名 .explanation/.physics-section/.info-panel */
.physics-principle,
.explanation,
.physics-section {
	margin-top: 20px;
	padding: 15px 20px;
	background-color: #f0f8ff;
	border-radius: 8px;
	border-left: 5px solid #3498db;
	line-height: 1.6;
	box-shadow: 0 4px 8px rgba(0,0,0,0.06);
}
.physics-principle h3,
.explanation h3,
.physics-section h3 {
	margin: 0 0 12px;
	color: #1f2937;
	font-weight: 600;
}
.physics-principle p,
.explanation p,
.physics-section p {
	margin: 0 0 12px;
	color: #34495e;
}

/* ===== 主要内容区域 / Main Content ===== */

/* 主要内容区域（支持弹性布局） */
.sim-main-content {
	display: flex;  /* 弹性布局 */
	flex-wrap: wrap;  /* 允许换行 */
	gap: 20px;  /* 元素间隔 */
}

/* ===== 页尾样式 / Footer Styles ===== */

.sim-footer {
	text-align: center;
	font-size: 0.8rem;
	color: #666;
	margin-top: 2rem;
	padding: 1rem 0;
	border-top: 1px solid #eee;
}

/* 公共：美化数字输入框（用于滑条旁的数值输入）
   放到公共样式中以便多个页面复用 */
.numeric-input,
.small-number-input,
.inline-number,
input[type="number"].small-number-input,
input[type="number"].inline-number,
#objectDistanceValue,
#focalLengthValue,
#objectHeightValue {
	display: inline-block;
	vertical-align: middle;
	border-radius: 8px;
	padding: 6px 10px;
	border: 1px solid rgba(0,0,0,0.12);
	background: #ffffff;
	min-width: 72px;
	height: 34px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
	font-size: 14px;
	line-height: 1;
	outline: none;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.numeric-input:focus,
.small-number-input:focus,
.inline-number:focus,
input[type="number"]:focus {
	box-shadow: 0 0 0 4px rgba(59,130,246,0.06);
	border-color: #3b82f6;
}

/* 保持浏览器默认的微调（spinner）控件，以便用户可以使用上下箭头/键盘微调。
   不在这里移除 ::-webkit-*-spin-button 或设置 appearance，以避免隐藏箭头。 */