/* ==========================================================================
   Bo Lab 站点样式表（全站唯一使用的样式文件）

   目录结构约定：
     /            5 个 HTML 页面（GitHub Pages 根路径，保证 URL 稳定）
     /css         样式表
     /js          脚本
     /images      图片资源
     /paper       论文 PDF

   页面结构约定：
     body.body
       └─ .frame            页面外框（白色背景容器）
            ├─ .mainheader  顶部导航栏
            └─ .onebox      页面内容区

   色彩约定：
     页面背景   #43474D   导航栏背景 #0088CE（HBKU 品牌蓝，原为主题红 #901235 → 已统一为 #7D0E2D）
     主题红     #7D0E2D   链接色     #8B2E4A（注释保留，链接实际已用 MIT 亮红 #FF1423，见 a 选择器）
     链接悬停   #7D0E2D   导航文字   #FFF
     --accent-color       主题红单一色源（默认 #7D0E2D，原 #901235），所有"红色"角色都引用此变量
     .text-accent         文本强调工具类，HTML 中需用品牌色的 span 直接加此 class

   字体层级约定（2026-09-26 对齐 MIT 字号体系）：
     h3  区块大标题（黑色 #000、字重 400 不加粗、27px，底部两段拼接分隔线）
     h4  区块内子标题（主题红，不加粗，视觉与原内联样式一致）
     正文 17px（body 106.25%），行距 1.2（保持原版）

   分隔线约定（h3 底部两段拼接线，顶部对齐）：
     左段占 1/5 宽、2px、主题红 #7D0E2D（由 var(--accent-color) 控制），用 ::before 绘制；
     右段占 4/5 宽、0.5px、浅灰（#BDBDBD），用 ::after 绘制；
     两段在 20% 处直接衔接，顶部边缘水平对齐，无渐变/模糊。
     颜色可分别覆盖：
       --divider-color-left   左段颜色（默认 = var(--accent-color) = #7D0E2D）
       --divider-color-right  右段颜色（默认浅灰 #BDBDBD）
     可在 :root / body 或单个 <h3> 上用内联样式覆盖
   ========================================================================== */


/* ----------------------------------------------------------
   主题变量与文本强调工具类
   说明：--accent-color 是全站"主题红"的唯一色源；
        所有需要品牌红色的 CSS 规则都引用此变量，
        HTML 中需要品牌色的内联 span 使用 .text-accent，
        避免在标签内硬编码颜色值。
   ---------------------------------------------------------- */
:root {
	--accent-color: #7D0E2D;       /* 主题红（原 #901235，已统一） */
}

.text-accent {
	color: var(--accent-color);
}


/* ----------------------------------------------------------
   页面基础
   说明：body 固定 1000px 宽度并水平居中；
        .body 类用于下方移动端媒体查询中的宽度切换
   ---------------------------------------------------------- */
html {
	scroll-behavior: smooth;         /* “Back to top” 锚点平滑滚动 */
	scrollbar-gutter: stable;        /* 始终预留滚动条空间，避免首页(无滚动条)与长页切换时白框水平跳动 */
}

body {
	font-size: 17.5px;              /* 正文 17px（对齐 MIT 正文字号，16px 基准 × 1.0625） */
	line-height: 1.5;                /* 行距 1.2→1.5，提升长文可读性 */
	background-color: #43474D;
	margin: 0 auto;
	width: 1000px;
	clear: both;
}

/* ----------------------------------------------------------
   页面外框（白色内容容器）
   ---------------------------------------------------------- */
.frame {
	font-family: Arial, Helvetica, sans-serif;  /* 正文/标题/按钮等（导航栏除外）：Arial */
	font-weight: 350;
	width: 100%;
	margin-top: 0%;
	background-color: #FFF;
	padding: 0px;
}

/* ----------------------------------------------------------
   顶部导航栏
   说明：用弹性布局（flex）实现与原浮动布局完全一致的几何效果：
        导航栏总高 50px（内容区 36px + 底部 14px）；
        链接顶部内边距 11px，条目文字间距 17px（9+8）；
        首项文字与内容区左缘对齐（20px）
   ---------------------------------------------------------- */
.mainheader {
	margin-top: 0;                   /* 红框紧贴页面顶部（移除顶部灰色间距） */
	margin-bottom: 16px;             /* 导航栏与下方白框间距（保持） */
	position: sticky;                /* 长页滚动时导航固定顶部，便于切换 */
	top: 0;
	z-index: 100;                    /* 保证导航覆盖正文内容 */
}

/* 消除 h5 默认外边距对导航位置的干扰，保证各页面导航栏位置一致（index 的 nav 在 h5 内，其余页为空 h5） */
.mainheader h5 {
	margin: 0;
	font-size: 100%;
	font-weight: normal;
}

.mainheader nav {
	/* 顶部导航栏背景：var(--accent-color) = #7D0E2D（主题红）
	   历史：曾考虑改 HBKU 品牌蓝 #0088CE（实测官网 rgb(0,136,206)），
	        最终保留主题红以维持全站单色叙事。如要回滚蓝，把背景改为 #0088CE 即可。 */
	background-color: var(--accent-color);
	padding-left: 10px;              /* 左右内边距 +10（原 0），与 .onebox 内容整体右移对齐 */
	padding-right: 10px;
	height: 100px;                  /* 背景块高度翻倍（原 50px = 36+14），文字由 flex 垂直居中 */
}

.mainheader nav ul {
	list-style: none;
	display: flex;                   /* 弹性布局取代旧的浮动 + 负边距 hack */
	align-items: center;             /* 导航文字在背景块内垂直居中 */
	height: 100%;
	margin: 0;
	padding: 0;
}

.mainheader nav ul li {
	font-size: 17px;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0px;
	font-family: Ubuntu, Helvetica;
}

/* 导航链接：默认白色无下划线（移除全局 a 继承的红色下划线），悬停加浅玫瑰下划线 */
.mainheader nav a:link,
.mainheader nav a:visited {
	color: #FFF;
	text-decoration: none;           /* 未选中导航项不显示下划线 */
	display: block;
	padding: 0px 9px 0px 8px;       /* 条目文字间距 = 9+8 = 17px，与原版一致；垂直由 flex 居中 */
}

/* 首个导航项的文字与 .onebox 内容左缘对齐（20px，与原版一致） */
.mainheader nav ul li:first-child a:link,
.mainheader nav ul li:first-child a:visited {
	padding-left: 20px;
}

.mainheader nav a {
	transition: color 0.2s ease;
}

.mainheader nav a:hover,
.mainheader nav a:active {
	color: #FFD6DF;                  /* 悬停为浅玫瑰色（红底上可读性优于浅灰） */
	text-decoration: underline;
}

/* 当前页高亮：加粗强化（下划线由内联样式提供） */
.mainheader nav a span {
	/*font-weight: 700;*/
}

/* ----------------------------------------------------------
   全局链接样式（所有 <a> 元素）
   模仿 MIT 链接：黑色文字 + MIT 红细下划线，悬停变亮红
   ---------------------------------------------------------- */
a {
	transition: color 0.2s ease, text-decoration-color 0.2s ease;  /* 颜色与下划线颜色平滑过渡 */
}

/* 所有链接：黑色文字 + MIT 亮红 #FF1423 1px 实线下划线（与官网 innovation 页下划线一致） */
a:link,
a:visited {
	color: #000;
	text-decoration: underline;
	text-decoration-style: solid;         /* 实线 */
	text-decoration-thickness: 1px;       /* 1px 细下划线 */
	text-decoration-color: #FF1423;       /* MIT 官网实际下划线色（实测 rgb(255,20,35)） */
	text-underline-offset: 4px;           /* 下划线与文字留一点间距 */
}

/* 悬停：文字与下划线都保持 MIT 亮红 #FF1423 */
a:hover,
a:active {
	color: #FF1423;
	text-decoration-color: #FF1423;
}

/* 键盘焦点指示（无障碍，仅键盘导航时可见） */
a:focus-visible {
	outline: 2px solid var(--accent-color);   /* 主题红 #7D0E2D */
	outline-offset: 2px;
}

/* ----------------------------------------------------------
   publication 页论文列表的 "Read PDF»" 链接：去掉下划线，
   保留黑色文字与 » 箭头；悬停时文字变红（与全局 a:hover 一致）。
   用 .onebox li a:not(.ieee-link) 精准命中（publication 页 <li>
   内只有 Read PDF 链接；导航栏 <li> 在 .mainheader 内不受影响；
   其他页面的 .onebox 无 li+a 链接）。
   ---------------------------------------------------------- */
.onebox li a:not(.ieee-link):link,
.onebox li a:not(.ieee-link):visited {
	text-decoration: none;           /* 去掉 MIT 红下划线 */
	color: #000;                     /* 保持黑色文字 */
}

.onebox li a:not(.ieee-link):hover,
.onebox li a:not(.ieee-link):active {
	text-decoration: none;           /* 悬停也不显示下划线 */
	color: #FF1423;                  /* 悬停文字变亮红（跟随全局 a:hover） */
}

/* ----------------------------------------------------------
   "Check Google Scholar»" 链接：亮红色边框包围（MIT 亮红 #FF1423，
   不用暗红），并去掉文字下划线。用 a[href*="scholar.google"]
   精准命中（全站唯一）。
   ---------------------------------------------------------- */
a[href*="scholar.google"] {
	border: 1px solid #FF1423;               /* 亮红色边框 */
	padding: 2px 8px;                        /* 边框与文字留出呼吸空间 */
	text-decoration: none;                   /* 去掉文字下划线 */
}

/* ----------------------------------------------------------
   链接域名悬停提示框（模仿浏览器原生链接预览气泡）
   黑底白字，悬停/键盘聚焦正文链接时显示在链接上方，
   内容为链接目标域名；由 js/link-tooltip.js 控制显示与定位。
   排除范围（导航栏 / Read PDF» / 锚点）在 JS 中处理。
   ---------------------------------------------------------- */
.link-tip {
	position: absolute;              /* 相对文档定位（JS 计算坐标） */
	z-index: 200;                    /* 覆盖正文内容 */
	background-color: #000;          /* 黑底 */
	color: #FFF;                     /* 白字 */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.3;
	padding: 5px 12px;
	border-radius: 0px;              /* 轻微圆角 */
	white-space: nowrap;             /* 域名不换行 */
	pointer-events: none;            /* 不阻挡鼠标，避免闪烁 */
	opacity: 0;                      /* 默认隐藏 */
	transform: translateY(3px);      /* 淡入时轻微上移 */
	transition: opacity 0.15s ease, transform 0.15s ease;  /* 平滑淡入淡出 */
}

/* 显示状态（JS 添加/移除此类） */
.link-tip--show {
	opacity: 1;
	transform: translateY(0);
}

/* ----------------------------------------------------------
   内容区（.onebox）
   说明：所有页面的主内容容器，白底 + 左右留白
   ---------------------------------------------------------- */
.onebox {
	padding-top: 0px;
	padding-left: 30px;              /* 20 → 30，左右内边距 +10（原 20px） */
	padding-right: 30px;
	padding-bottom: 10px;
	margin-top: 0%;
	background-color: #FFF;
}

/* 区块大标题：黑色不加粗 + 底部两段拼接线（左 1/5 红 2px + 右 4/5 浅灰 0.5px，顶部对齐） */
.onebox h3 {
	font-size: 125%;              /* 27px（对齐 MIT 区块标题比例：27/17px，相对正文） */
	padding-left: 0px;
	text-align: left;
	vertical-align: top;
	margin-bottom: -3%;
	color: #000000;                  /* 黑色（对齐 MIT 区块标题） */
	font-weight: 500;                /* 500 折中：比正文更醒目，不过分加粗 */
	position: relative;                    /* 作为 ::before/::after 分隔线的定位基准 */
	border-bottom: 1px solid transparent;  /* 保留原 1px 高度占位，避免布局位移 */
}

/* 分隔线左段：占 20% 宽、2px、主题红（最初版本颜色），下移使横线与上下文字间距均衡 */
.onebox h3::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 20%;
	height: 2px;
	background: var(--divider-color-left, var(--accent-color));   /* 默认主题红 #7D0E2D，可在单个 <h3> 上覆盖 */
}

/* 分隔线右段：占 80% 宽、0.5px、浅灰，顶部与左段顶部对齐（在 20% 处直接衔接，无渐变） */
.onebox h3::after {
	content: "";
	position: absolute;
	left: 20%;
	bottom: -2.5px;                          /* 顶边与左段 2px 线的顶边对齐 */
	width: 80%;
	height: 0.5px;
	background: var(--divider-color-right, #BDBDBD);
}

/* 区块内子标题：主题红、略加字重，与正文拉开层级（原 100% 与正文同字号层级弱） */
.onebox h4 {
	font-size: 110%;
	color: var(--accent-color);       /* 主题红 #7D0E2D（原 #901235） */
	font-weight: 500;
	margin: 0;
}

/* 组员分类标题（group 页 Postdoc Researcher / Ph.D. Students / Research Assistant）：
   黑色文字（覆盖默认主题红）。下方灰色横线由外层 .member-group 容器提供。 */
.onebox h4.section-label {
	color: #000;                       /* 黑色文字（覆盖默认主题红） */
	font-weight: 500;
}

/* 组员分类区块容器：底部 0.5px 灰色横线，分隔各成员区块；
   最后一个区块（Research Assistant）不显示横线。 */
.onebox .member-group {
	border-bottom: 0.5px solid #BDBDBD;  /* 0.5px 浅灰横线 */
	padding-bottom: 10px;                /* 横线与内容之间留出呼吸空间 */
	margin-bottom: 12px;                 /* 区块之间的间距 */
}

/* 最后一个模块不加横线 */
.onebox .member-group:last-of-type {
	border-bottom: none;
}

/* 内容区版权/说明文字（h6）：辅助文字，小字号灰色 */
.onebox h6 {
	font-size: 85%;
	text-align: left;
	font-weight: 300;
	color: #666;
}

/* 内容区列表项：方块符号 + 收紧的左/下边距（原版参数） */
.onebox li {
	list-style: square;
	font-size: 100%;
	margin-left: -23px;
	margin-bottom: -7px;
}

/* ----------------------------------------------------------
   新闻列表（news.html）
   说明：无符号列表，负边距用于抵消缩进并压缩行距（原版参数）
   ---------------------------------------------------------- */
.news li {
	list-style: none;
	font-size: 100%;
	margin-left: -39px;
	margin-bottom: -16px;
}

/* ----------------------------------------------------------
   移动端适配（窄屏）
   ---------------------------------------------------------- */
@media only screen and (min-width: 100px) and (max-width: 750px) {
	.body {
		width: 100%;
		font-size: 100%;
	}

	/* 窄屏取消导航固定定位：避免导航遮挡/压缩可见内容区域，
	   让用户能看到更多正文信息；导航随页面正常滚动（static）。 */
	.mainheader {
		position: static;            /* 覆盖桌面端 sticky，窄屏不固定 */
		margin-bottom: 8px;          /* 缩小导航与正文间距，减少纵向浪费 */
	}

	/* 窄屏导航纵向堆叠（等效于原浮动布局的逐行换行） */
	.mainheader nav {
		height: auto;
		padding-left: 8px;           /* 减小导航左右内边距，增加内容宽度 */
		padding-right: 8px;
	}

	.mainheader nav ul {
		flex-direction: column;
	}

	.mainheader nav ul li {
		width: 100%;
		font-size: 16px;
		font-weight: 300;
		text-align: left;
	}

	/* 移动端导航项增大点击热区 */
	.mainheader nav ul li a:link,
	.mainheader nav ul li a:visited {
		padding: 14px 9px 14px 16px;
	}

	/* 减小正文区左右内边距，增加窄屏下的实际内容显示宽度 */
	.onebox {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* 窄屏下成员照片与文字改为上下堆叠（桌面端仍左右并排）：
	   把 member-group 表格的 tr/td 都改为块级，使照片 td 在上、文字 td 在下；
	   中间的间隔 td（width 40 的空单元格）隐藏，避免产生多余空行。 */
	.onebox .member-group table,
	.onebox .member-group tbody,
	.onebox .member-group tr {
		display: block;              /* 表格容器块级化，打破表格布局 */
		width: 100%;
	}

	.onebox .member-group td {
		display: block;              /* 每个单元格占满一行，自然上下堆叠 */
		width: 100% !important;      /* 覆盖 HTML 内联 width（160/40/715） */
		padding: 2px 0;              /* 保留少量纵向间距 */
		text-align: left;
	}

	/* 隐藏中间的间隔单元格（原 width=40 的空 td） */
	.onebox .member-group td:nth-child(2) {
		display: none;
	}

	/* 照片单元格：图片居左，下方留一点间距与文字分隔 */
	.onebox .member-group td:first-child {
		margin-bottom: 6px;
	}

	.frame img {
		width: 125px;
	}
}

/* 更窄断点（手机竖屏）：进一步压缩两侧边距，最大化内容宽度 */
@media only screen and (min-width: 100px) and (max-width: 480px) {
	.onebox {
		padding-left: 8px;
		padding-right: 8px;
	}

	.mainheader nav {
		padding-left: 6px;
		padding-right: 6px;
	}

	.mainheader nav ul li a:link,
	.mainheader nav ul li a:visited {
		padding: 12px 6px 12px 12px;
	}

	.frame img {
		width: 100px;                /* 更窄屏下照片进一步缩小，避免挤压文字列 */
	}
}