/* ==========================================================================
   站点视觉优化层  site-theme.css
   --------------------------------------------------------------------------
   由 custom/header.tmpl 在 Gitea 内置样式之后引入，因此同等特异性下优先生效。

   设计方向：**扁平化**（R 角部分已按要求撤销，见下）
     · 扁平化 —— 去除装饰性投影，层次改由「细描边 + 灰阶 + 留白」承担。
       唯一保留的阴影是浮层（下拉/弹窗/提示），因为浮层需要与页面内容分离，
       取消后反而看不清层级；这是扁平化里必须留的例外。
     · R 角 —— **不做任何覆盖，全部恢复 Gitea 原生值**。
       原生基准是 --border-radius: 4px，另有 102 处硬编码的 .28571429rem（同为 4px）。
       历史：本文件曾把圆角统一放大到 6/8/10px，现已按要求撤销；
       若日后要恢复，务必先读第 2 节留下的实测结论（覆盖必须加 !important）。

   两条硬性约束：
     1. 颜色一律走 Gitea 的 CSS 变量，绝不写死色值 —— 否则暗色模式会崩。
        （例：--color-secondary / --color-hover / --color-shadow 均随主题变化）
     2. 只做「优化」，不改结构。选择器尽量贴合 Gitea 现有 class。

   音频说明：本主题不引入任何音频/音效。
     已核实 Gitea 1.27 前端不含音频代码（new Audio( / .play() / AudioContext /
     <audio> 命中数均为 0），因此「不采用音频」无需额外关闭动作，保持零音频即可。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 设计令牌
   8px 基准间距 + 统一缓动。
   （R 角分档 --dsh-r-* 与 --border-radius 覆盖均已撤销，故此处不再定义。）
   -------------------------------------------------------------------------- */
:root {
	--dsh-s1: 4px;
	--dsh-s2: 8px;
	--dsh-s3: 12px;
	--dsh-s4: 16px;
	--dsh-s5: 24px;
	--dsh-s6: 32px;

	--dsh-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
	--dsh-dur: 0.16s;
}

/* --------------------------------------------------------------------------
   1. 扁平化基础
   内置样式给 .ui 系列挂了较多投影。这里统一去掉，改用描边表达边界。
   -------------------------------------------------------------------------- */
.ui.segment,
.ui.segments,
.ui.attached.segment,
.ui.card,
.ui.cards > .card,
.ui.message,
.ui.form .field > .ui.segment {
	box-shadow: none;
}

/* 扁平化后描边承担全部层次，统一为内置描边色（随主题变化） */
.ui.segment,
.ui.attached.segment,
.ui.card,
.ui.cards > .card {
	border-color: var(--color-secondary);
}

/* 浮层例外：下拉菜单 / 弹窗 / 弹出提示需要与页面分离，保留轻度投影。
   实测结论：Fomantic 对 .ui.floating.dropdown .menu 的阴影用了 !important，
   必须同样用 !important 并且让选择器不少于 3 个 class 才能压住
   （故写成 .ui.dropdown .menu 之外再补 .ui.floating.dropdown .menu）。
   注：这里原先还顺带统一了浮层圆角，随本次撤销一并移除。 */
.ui.dropdown .menu,
.ui.floating.dropdown .menu,
.ui.modal,
.ui.popup,
.tippy-box {
	box-shadow: 0 6px 24px var(--color-shadow) !important;
}

/* --------------------------------------------------------------------------
   2. R 角 —— 已按要求撤销
   原内容（统一放大到 6/8/10px，并覆盖 --border-radius）已全部移除，
   圆角回到 Gitea 原生值（4px）。下面只保留当时实测到的一条结论，
   避免日后重复踩坑 —— 这不是生效样式，是笔记。

   附录：为什么当年圆角覆盖必须加 !important
   实测（Chrome DevTools Protocol 读 computed style）发现，即使本样式表
   在内置 CSS 之后加载、且选择器特异性相同，.ui.button 仍然取到内置的 4px；
   用 DevTools 注入同名后置规则同样不生效，只有 !important 生效。
   即 Gitea 侧另有优先级更高的来源在起作用（无法从常规 CSS 层面定位）。
   内置 CSS 对 border-radius 一律未用 !important，因此加 !important
   只会压过内置的非重要声明，不会误伤组件自身的 .circular/.avatar 等
   （那些规则自带圆角）。若日后要恢复大 R 角，记住这条即可。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3. 排版节奏
   Gitea 已按语言处理好字体族（system-ui-zh-cn 等），这里**不动字体**，
   只补行高与标题间距，让长文（Markdown / 提交说明）更耐读。
   -------------------------------------------------------------------------- */
body {
	line-height: 1.6;
}

.markup {
	/* 正文行高比内置的 1.5 略松，中文长段落明显更舒服 */
	line-height: 1.75;
}

.markup h1,
.markup h2,
.markup h3 {
	letter-spacing: -0.01em;
}

.markup h2 {
	margin-top: 1.6em;
}

/* 代码块：行高比正文紧，避免大段代码被拉散 */
.markup pre,
.markup code,
.file-view.code-view {
	line-height: 1.5;
}

/* 表格：表头与单元格垂直居中，数字列右对齐更易比对 */
.markup table th,
.markup table td {
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   4. 吸顶导航
   Gitea 内部已有 top:44px / 47px 的粘性偏移（.diff-file-tree、.sticky-2nd-row），
   说明上游本就预期导航吸顶；而 #navbar 本身并没有粘性，
   导致滚到长页中部就失去返回入口。这里补上。
   -------------------------------------------------------------------------- */
#navbar {
	position: sticky;
	top: 0;
	z-index: 20;
	/* 轻微背景模糊，滚动时内容不会与导航文字互相干扰 */
	backdrop-filter: saturate(1.4) blur(8px);
}

/* 移动端断点下 Gitea 会把导航改成纵向布局，粘性高度不稳，故取消 */
@media (max-width: 767.98px) {
	#navbar {
		position: static;
	}
}

/* --------------------------------------------------------------------------
   5. 交互状态：hover / active / focus
   扁平化下「可点」的反馈从投影改为底色与描边变化。
   -------------------------------------------------------------------------- */
a {
	transition: color var(--dsh-dur) var(--dsh-ease);
}

.ui.button,
.ui.input > input,
.ui.dropdown > .text {
	transition:
		background-color var(--dsh-dur) var(--dsh-ease),
		border-color var(--dsh-dur) var(--dsh-ease),
		color var(--dsh-dur) var(--dsh-ease);
}

/* 主按钮：扁平实心，不再用投影表达主次；悬停仅加深底色 */
.ui.primary.button {
	box-shadow: none;
}

.ui.primary.button:hover,
.ui.primary.button:focus {
	box-shadow: none;
}

/* 基础按钮悬停时用描边强度提示可点，替代原来的阴影 */
.ui.basic.button:hover {
	border-color: var(--color-primary-alpha-40);
}

/* Gitea 对 a/button 已有 :focus-visible，但用的是内缩描边；
   这里统一改成外扩，圆角元素上更清晰。仅键盘可见，不影响鼠标用户。 */
:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* 表单控件原本只有 :focus（鼠标点也触发），补 :focus-visible 更克制 */
.ui.input > input:focus-visible,
.ui.form textarea:focus-visible,
.ui.form select:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   6. 仓库文件列表
   最常被扫视的一屏：加大行距、让图标与文件名对齐、提交信息可截断。
   -------------------------------------------------------------------------- */
#repo-files-table .repo-file-cell,
#repo-files-table .repo-file-line {
	padding: 10px 12px;
}

#repo-files-table .repo-file-cell.name {
	gap: var(--dsh-s2);
}

/* 行悬停：整行高亮（含三列），比只高亮单格更易追踪 */
#repo-files-table .repo-file-item:hover > .repo-file-cell {
	background: var(--color-hover);
}

/* 提交信息列：过长时省略号，避免把时间列挤出屏幕 */
#repo-files-table .repo-file-cell.message {
	min-width: 0;
}

/* 顶部「最新提交」条：与文件行拉开层级 */
#repo-files-table .repo-file-last-commit {
	font-weight: var(--font-weight-semibold, 500);
}

/* --------------------------------------------------------------------------
   7. 卡片（扁平化改写）
   原来是「悬停抬升 + 投影」。扁平化后改为描边变色 —— 依旧明确可点，
   但不再依赖阴影，视觉更干净、渲染也更省。
   -------------------------------------------------------------------------- */
.ui.repository.list .item,
.explore .ui.repository.list .item {
	transition:
		border-color var(--dsh-dur) var(--dsh-ease),
		background-color var(--dsh-dur) var(--dsh-ease);
}

.ui.repository.list .item:hover {
	border-color: var(--color-primary-alpha-40);
	background: var(--color-hover);
	box-shadow: none;
}

/* 侧栏标题与正文拉开节奏 */
.repository .repository-summary .segment.sub-menu .item {
	padding-top: 6px;
	padding-bottom: 6px;
}

/* --------------------------------------------------------------------------
   8. 页脚 + 备案信息贴底条
   页脚本身恢复 Gitea 原生单行布局；备案信息单独做一条**始终贴住视口底部**的
   横条（`.dsh-license`），滚动时也一直可见。
   -------------------------------------------------------------------------- */
.page-footer {
	line-height: 1.8;
}

.page-footer .left-links {
	row-gap: var(--dsh-s1);
}

/* 备案信息贴底条：整幅居中 + 加粗，始终贴在屏幕底部。
 *
 * 为什么是 sticky 而不是 fixed（两者都实测过，结论明确）：
 *   · sticky 元素**仍占文档流位置**，它那 ~31px 的占位正好把页脚顶上去。
 *     实测滚到最底部：footerBottom=876 < barTop=877，页脚完整可见。
 *   · fixed 元素脱离文档流，会盖住页脚最后 31px
 *     （实测 footerBottom=900 > barTop=877，页脚被遮=true）。
 *   所以 sticky 不需要给 body 加 padding-bottom，也不用去猜条子的高度——
 *   高度随内容自适应（窄屏折行变高）时天然不会错位。这是选它的根本原因。
 *
 * 位置前提：它必须是 <body> 的**直接子级**（模板里放在 </footer> 之后），
 * 不能留在 .page-footer 里 —— sticky 的移动范围被父级盒子限制，
 * 父级只有 ~31px 高时它根本挪不动。
 *
 * z-index 取 5：压得住正文（多为 auto / 1~3），又低于下拉菜单（11）、
 * 提示浮层（100）、遮罩（1000）和吸顶导航（#navbar 为 20），
 * 所以页脚里的主题/语言下拉在底部展开时不会被这条底栏盖住。
 *
 * 视觉上接住页脚：同底色 + 上描边，走扁平化方向（不加投影）。 */
.dsh-license {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	padding: 5px 16px;
	background: var(--color-footer);
	border-top: 1px solid var(--color-secondary);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

@media (max-width: 767.98px) {
	/* 窄屏下单个备案条目已接近一行宽，必然折行，行尾会挂一个孤零零的「|」。
	   改为纵向堆叠、隐藏分隔符，并缩小字号收紧行距 —— 底栏是常驻的，
	   高度直接吃掉屏幕，所以要尽量压扁（12px/1.35，三条约 49px + 内边距）。 */
	.dsh-license {
		flex-direction: column;
		gap: 0.15em;
		padding: 4px 10px;
		font-size: 12px;
		line-height: 1.35;
	}

	.dsh-license-sep {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   9. 移动端可点区域
   导航项与按钮在触屏下至少 40px 高，减少误触。
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	#navbar .navbar-mobile-right > .item,
	#navbar .item {
		min-height: 40px;
	}

	.ui.button {
		min-height: 38px;
	}

	/* 文件列表在窄屏下压缩内边距，给文件名留出更多宽度 */
	#repo-files-table .repo-file-cell,
	#repo-files-table .repo-file-line {
		padding: 8px 10px;
	}
}

/* --------------------------------------------------------------------------
   10. 动效偏好（可访问性）
   Gitea 内置样式完全没有处理 prefers-reduced-motion。前庭功能敏感的用户
   可能因过渡/动画不适，这里统一降级。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}