/*
Theme Name: log_ooo
Theme URI: https://example.com/log_ooo
Author: log_ooo
Description: 冷峻的计算机日志主题。两套独立日志（公开 / 私密），私密日志带防暴力破解的密码保护；每条日志可标记心情 / 精力 / 专注三个状态灯；响应式，含黑暗模式。无框架、无图标字体、无追踪脚本，只有文字与极少的 CSS。
Version: 4.1.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: logooo
Tags: blog, dark-mode, custom-post-type, two-column, minimal
*/

/* ==========================================================================
   0. 字体
   --------------------------------------------------------------------------
   不装任何自定义字体，直接用访客系统自带的默认字体。

   理由很实际：中文字形太多，任何中文 web 字体都在 1MB 上下，为一个
   日志站付出这个体重不划算；而系统字体恰恰是每个平台上最顺眼的那一套
   （Mac 是苹方 / SF，Windows 是微软雅黑 / Segoe UI），还零加载、零等待。

   层次不靠换字体，靠字重：系统字体本身带齐了 Regular / Medium / Semibold，
   所以下面只要把 font-weight 分好档，标题和正文自然就拉开了。
   ========================================================================== */

/* ==========================================================================
   1. 设计变量
   --------------------------------------------------------------------------
   照极简做法：全部可调项集中为一组 CSS 变量，主题切换只改这里的值。
   暗色为默认；右上角圆点可切到亮色，选择记在 localStorage 里。
   ========================================================================== */

:root {
	/*
	 * color-scheme 告诉浏览器「这页是暗的」：
	 * 滚动条、下拉箭头、自动填充背景这些原生控件才会跟着变
	 * （不写的话 Chrome 会给你一个亮白色的密码框配暗底）。
	 */
	color-scheme: dark;

	/* 版式 */
	--width: 720px;                        /* 单栏阅读宽度 */
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
		"Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
		"Source Han Sans SC", "Noto Sans CJK SC", "DengXian", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	/* 英文与代码一律走等宽：自定义字体必须排在系统等宽体之前，否则不生效。 */
	--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
		"Liberation Mono", "Courier New", monospace;
	--font-scale: 17px;
	--line-height: 1.75;                   /* 中文需要比默认的 1.5 更松 */
	--radius: 3px;                         /* 近直角 */

	/*
	 * 暗色为默认值，不再跟随系统偏好 —— 打开就是暗的。
	 * 手动切到亮色时由 :root[data-theme="light"] 整体覆盖。
	 */
	--bg: #16171a;
	--bg-soft: #1e2024;
	--fg: #c7c9cd;
	--fg-strong: #eceef0;
	--fg-muted: #80838a;
	--line: #2b2d32;
	--link: var(--dot-high);
	--link-visited: var(--dot-high);

	/*
	 * 状态灯：红 / 黄 / 绿。
	 * 三者取同一档饱和度与感知亮度，只改色相 —— 视觉重量一致，
	 * 不会出现黄色跳出来、绿色缩进去的情况。
	 */
	--dot-low: #ee6258;
	--dot-mid: #fad338;
	--dot-high: #42d78c;
	--dot-empty: #3a3d43;

	/*
	 * 开关点亮后的柔光：与状态灯的黄同色，只是透明度递减。
	 * 前三条硬编码值是不支持 color-mix 的浏览器的回退，
	 * 后面三条会覆盖它们（不认识 color-mix 的浏览器直接忽略）。
	 */
	--glow-near: rgba(250, 211, 56, 0.55);
	--glow-mid: rgba(250, 211, 56, 0.30);
	--glow-far: rgba(250, 211, 56, 0.14);
	--glow-near: color-mix(in srgb, var(--dot-mid) 55%, transparent);
	--glow-mid: color-mix(in srgb, var(--dot-mid) 30%, transparent);
	--glow-far: color-mix(in srgb, var(--dot-mid) 14%, transparent);
}

/* 手动切到亮色：整体覆盖上面那套暗色变量 */
:root[data-theme="light"] {
	/*
	 * color-scheme 告诉浏览器「这页是亮的 / 暗的」，
	 * 滚动条、下拉箭头、密码框这些原生控件才会跟着变（否则亮控件配暗底）。
	 */
	color-scheme: light;

	--bg: #ffffff;
	--bg-soft: #f7f7f5;
	--fg: #333333;
	--fg-strong: #111111;
	--fg-muted: #8a8a86;
	--line: #e4e4e1;
	--link: var(--dot-high);
	--link-visited: var(--dot-high);
	--dot-low: #e4453a;
	--dot-mid: #f6cc23;
	--dot-high: #2ec278;
	--dot-empty: #d5d5d2;
}

/*
 * 亮色下开关不发光，变量置空，免得 hover 规则把光晕带过来。
 * （下面 hover 规则写在默认作用域里，亮色必须显式摁掉。）
 */
:root[data-theme="light"] {
	--glow-near: transparent;
	--glow-mid: transparent;
	--glow-far: transparent;
}

/* ==========================================================================
   2. 基础重置
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
}

/*
 * 注意这里写成 html body 而不是 body：
 * WordPress 核心的 global-styles 里有一条 body { padding: 0 }，特异性同为 0,0,1。
 * 私密日志走的是「校验会话后直接引入模板」的非标准路径，那条核心样式
 * 会晚于本主题的 style.css 输出，把页面左右留白摁掉（内容会比公开页宽 44px）。
 * 加一层 html 把特异性抬到 0,0,2，谁先谁后都压得住。
 */
html body {
	margin: 0 auto;
	padding: 40px 22px 80px;
	max-width: var(--width);
	font-family: var(--font-body);
	font-size: var(--font-scale);
	line-height: var(--line-height);
	color: var(--fg);
	background: var(--bg);
	word-wrap: break-word;
	overflow-wrap: break-word;

	/* 中文在 Mac 上默认会发虚变粗，这两行是质感的关键。 */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;

	/* 中文挤在一起时观感差，给极轻的字距让它透气。 */
	letter-spacing: 0.01em;

	/*
	 * 打开 Fira Code 的连字：写 -> 会渲染成 →，写 != 会渲染成 ≠。
	 * 这是等宽体「一眼能认出来」的地方，关掉的话它跟普通字体差别很小。
	 * 汉字不在该字体里，不受影响。
	 */
	font-variant-ligatures: contextual common-ligatures;
	font-feature-settings: "calt" 1, "liga" 1;
}

/*
 * 浏览器给 input / button / textarea / select 的默认字体是系统 UI 字体，
 * 而且【不继承 body】。不写明的话，密码框、搜索框、评论框里的英文和数字
 * 会跟正文是两套字 —— 全站统一西文字体就在这里破功。
 */
input,
textarea,
select,
button,
optgroup {
	font-family: inherit;
	font-size: 1em;
	line-height: inherit;
	color: inherit;
}

/* ==========================================================================
   3. 排版
   ========================================================================== */

h1,
h2,
h3,
h4 {
	color: var(--fg-strong);
	line-height: 1.35;
	/* 不用 700：中文字体的 Bold 在小字号下会糊成一团，600 更干净。 */
	font-weight: 600;
	letter-spacing: -0.005em;
}

h1 { font-size: 2em; margin: 0 0 0.5em; }
h2 { font-size: 1.4em; margin: 2.2em 0 0.6em; }
h3 { font-size: 1.25em; margin: 1.8em 0 0.4em; }

p { margin: 0 0 1.1em; }

a {
	color: var(--link);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: var(--link-visited);
}

strong,
b {
	color: var(--fg-strong);
}

img {
	max-width: 100%;
	height: auto;
}

hr {
	border: 0;
	border-top: 1px dashed var(--line);
	margin: 2.2em 0;
}

code,
pre {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

code {
	background: var(--bg-soft);
	padding: 2px 5px;
	border-radius: var(--radius);

	/* 两端对齐的配套：超长标识符允许在任意字符断行，
	   否则整枚 code 掉到下一行，上一行会被 justify 拉出巨大字距。 */
	word-break: break-all;
}

pre {
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-left: 3px solid var(--line);
	border-radius: var(--radius);
	padding: 13px 15px;
	overflow-x: auto;
	line-height: 1.6;

	/* 超长代码行横向滚动：没有这条，新浏览器根本不显示滚动条，
	   用户看不出右边还有内容，以为被裁掉了。 */
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
}

pre::-webkit-scrollbar {
	height: 6px;
}

pre::-webkit-scrollbar-track {
	background: transparent;
}

pre::-webkit-scrollbar-thumb {
	background: var(--line);
	border-radius: 3px;
}

/* 宽表格同样横向滚动，不撑破正文。 */
.log-single__body > table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

pre code {
	background: none;
	padding: 0;
	border-radius: 0;
}

blockquote {
	margin: 1.2em 0;
	padding: 2px 0 2px 18px;
	border-left: 2px solid var(--line);
	color: var(--fg-muted);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}

th,
td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--line);
}

/* ==========================================================================
   4. 站点页头 / 页脚
   --------------------------------------------------------------------------
   结构保持极简：极少的元素，导航就是一行链接。
   ========================================================================== */

.site-head {
	margin-bottom: 3em;
}

/*
 * 站名与主题开关同行。
 * 开关是站点级设置，放在这一行的最右端，不参与下面那排导航项的排布。
 */
.site-head__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

.site-title {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--font-body);
	font-size: 1.5em;
	font-weight: 600;
	color: var(--fg-strong);
	letter-spacing: 0.01em;
	margin: 0;
}


.site-title:hover {
	text-decoration: none;
}

/*
 * 站名左侧的图标：后台「外观 → 自定义 → 站点身份」里上传，
 * 支持 SVG。没上传就什么都不显示，只有站名文字。
 */
.site-logo {
	display: block;
	/* 大小可在「外观 → 自定义 → 站点身份 → Logo 大小」里调，1 = 与站名文字等高。 */
	height: var(--logo-size, 1em);
	width: auto;
	/* 宽度上限跟着高度走，否则调大后会被卡住变形。 */
	max-width: calc(var(--logo-size, 1em) * 4);
	object-fit: contain;
}


.site-desc {
	margin: 0.6em 0 0;
	color: var(--fg-muted);
	font-size: 0.9em;
}

.site-nav {
	margin-top: 2em;
	font-family: var(--font-body);
	font-size: 0.9em;
}

/* wp_nav_menu 输出 ul > li > a；去掉列表默认样式，横向排布。 */
.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.1em;
}

.site-nav a {
	color: var(--fg-muted);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
	color: var(--fg-strong);
	text-decoration: none;
}

.site-foot {
	margin-top: 5em;
	padding-top: 1.4em;
	border-top: 1px dashed var(--line);
	color: var(--fg-muted);
	font-family: var(--font-body);
	font-size: 0.85em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.2em;
	justify-content: space-between;
}

/* —— 站点公告 —— */

.site-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 2.4em;
	padding: 0.7em 0.9em 0.7em 1em;
	border-left: 2px solid var(--fg-muted);
	background: var(--bg-soft);
	font-size: 0.9em;
	line-height: 1.65;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.site-notice--warn {
	border-left-color: #fad338;
}

.site-notice--ok {
	border-left-color: var(--link);
}

.site-notice.is-closing {
	opacity: 0;
	transform: translateY(-4px);
}

.site-notice__text {
	margin: 0;
	flex: 1;
	color: var(--fg);
}

.site-notice__link {
	margin-left: 0.5em;
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.site-notice__close {
	flex: none;
	width: 1.4em;
	height: 1.4em;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1em;
	line-height: 1;
	color: var(--fg-muted);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color 0.15s ease;
}

.site-notice__close:hover {
	color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
	.site-notice {
		transition: none;
	}
}

/* ==========================================================================
   5. 日志列表
   --------------------------------------------------------------------------
   核心结构：一条日志 = 日期 + 标题 + 状态灯，行内排布。
   日期占固定宽度，标题自动填充。
   ========================================================================== */

.log-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.log-item {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
}

/* 日期：等宽字体，固定列宽 —— 计算感的来源 */
.log-item__date {
	flex: 0 0 104px;
	font-family: var(--font-body);
	font-size: 0.85em;
	color: var(--fg-muted);
	white-space: nowrap;
}

.log-item__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 1.125em;
	/*
	 * 层级：日期 13.6px/400/灰 → 标题 18px/600/深。
	 * 字号与字重同时拉开，一眼就能分出主次。
	 */
	font-weight: 600;
}

.log-item__title a {
	color: var(--fg-strong);
}

.log-item:hover .log-item__title a {
	color: var(--fg-strong);
	text-decoration: underline;
}

/* ==========================================================================
   6. 状态灯
   --------------------------------------------------------------------------
   三个圆点，纯 CSS 绘制（border-radius: 50%），不依赖图片或图标字体。
   顺序固定：心情 / 精力 / 专注。
   未设置的维度渲染为空心点，保持位次不跳动。
   ========================================================================== */

.dots {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	vertical-align: middle;
}

.dots i {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dot-empty);
}

.dots i.on-low  { background: var(--dot-low); }
.dots i.on-mid  { background: var(--dot-mid); }
.dots i.on-high { background: var(--dot-high); }

/*
 * 列表页里状态灯紧跟日期之后。
 *
 * 整行用 baseline 对齐（日期与标题的基线必须齐），但圆点没有基线，
 * 会被整行压到基线下方去 —— 所以灯单独取行内垂直居中，
 * 才能与标题文字的视觉中心对齐。
 */
.log-item .dots {
	align-self: center;
	/*
	 * 推到行尾并留出固定空位，
	 * 于是每一条的三个灯在右侧对齐成一列 —— 纵向扫一眼就能比较状态。
	 */
	margin-left: auto;
	padding-left: 16px;
}

/*
 * 文章页顶部：日期与状态灯同一行，灯推到行尾。
 *
 * 与列表页共用一套对齐逻辑（整行 baseline + 灯单独居中 + margin-left:auto
 * 顶到行尾），只是灯放大到 11px —— 文章页一次只看一篇，状态值得看得更清。
 * 分页链接行另用 .log-single__pages，不吃这里的 flex。
 */
.log-single__meta {
	display: flex;
	align-items: baseline;
	gap: 0 12px;
	font-family: var(--font-body);
	font-size: 0.85em;
	color: var(--fg-muted);
	margin: 0;
}

.log-single__meta .dots {
	align-self: center;
	margin-left: auto;
	padding-left: 16px;
	gap: 8px;
}

.log-single__meta .dots i {
	width: 11px;
	height: 11px;
}

/* ==========================================================================
   7. 单篇日志
   ========================================================================== */

.log-single {
	/*
	 * 底部留白：给「末节标题滚到正文顶部」留出空间。
	 * 不留的话，最后一个标题永远卡在视口下方，大纲高亮会停在倒数第几项 ——
	 * 读者读完了却看到高亮没走到最后，会以为是坏了。
	 * 顺带让长文收尾不那么局促。列表页不受影响（.log-single 只在单篇用）。
	 */
	margin-bottom: 50vh;
}

.log-single__title {
	margin: 0 0 0.35em;
	font-size: 2em;
}

/* 分页链接行：与日期行同款字号，但不需要 flex 布局。 */
.log-single__pages {
	font-family: var(--font-body);
	font-size: 0.85em;
	color: var(--fg-muted);
	margin: 2em 0 0;
}

.log-single__body {
	margin-top: 2em;

	/*
	 * 中文出版惯例：正文两端对齐，右边缘笔直，与代码块、分隔线这些
	 * 「实元素」的边缘对齐。最后一行/短行保持左对齐，不强行拉伸。
	 */
	text-align: justify;
}

/*
 * 正文直接子元素一律放开到容器满宽。
 *
 * WordPress 全局样式或某些插件会给 .wp-block-* 段落塞 max-width 约束
 * （主题没定义同类规则时它就生效），于是「文字比代码块窄一截」。
 * 这里只放开文字元素 —— img 必须保留 max-width:100% 防溢出，不能碰。
 */
.log-single__body > p,
.log-single__body > h1,
.log-single__body > h2,
.log-single__body > h3,
.log-single__body > h4,
.log-single__body > ul,
.log-single__body > ol,
.log-single__body > blockquote,
.log-single__body > figure {
	max-width: none;
}

.log-single__body > *:first-child {
	margin-top: 0;
}

/* 标签行 */
.log-tags {
	margin-top: 2.4em;
	font-family: var(--font-body);
	font-size: 0.85em;
	color: var(--fg-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.9em;
}

.log-tags a {
	color: var(--fg-muted);
}

.log-tags a:hover {
	color: var(--link);
}

/* ==========================================================================
   7.5 内容区块
   --------------------------------------------------------------------------
   主题自研的四个 Gutenberg 区块。思路一致：结构由服务端给，样式在这里定；
   不加圆角阴影、不加动效，靠「细线 + 克制的一点点颜色」区分类型。
   ========================================================================== */

/* —— 提示框 —— */

.block-notice {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 0.75em;
	margin: 1.6em 0;
	padding: 0.9em 1em;
	border-left: 2px solid var(--fg-muted);
	background: var(--bg-soft);
}

/* 三种类型的差别只体现在左侧那道线和标记符号的色上 */
.block-notice--info {
	border-left-color: var(--fg-muted);
}

.block-notice--tip {
	border-left-color: var(--dot-high);
}

.block-notice--warn {
	border-left-color: var(--dot-mid);
}

.block-notice__mark {
	font-family: var(--font-mono);
	font-size: 0.9em;
	line-height: 1.75;
	color: var(--fg-muted);
}

.block-notice--tip .block-notice__mark {
	color: var(--dot-high);
}

.block-notice--warn .block-notice__mark {
	color: var(--dot-mid);
}

.block-notice__body > *:first-child {
	margin-top: 0;
}

.block-notice__body > *:last-child {
	margin-bottom: 0;
}

.block-notice__title {
	font-weight: 600;
	color: var(--fg-strong);
	margin-bottom: 0.3em;
}

/* —— 折叠面板 —— */

.block-collapse {
	margin: 1.6em 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.block-collapse__head {
	padding: 0.7em 0;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--fg-strong);
}

.block-collapse__head::-webkit-details-marker {
	display: none;
}

/* 与归档页同款三角箭头，靠旋转表达开合 */
.block-collapse__head::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.6em;
	border-left: 2px solid var(--fg-muted);
	border-top: 2px solid var(--fg-muted);
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
	vertical-align: 0.1em;
}

.block-collapse[open] > .block-collapse__head::before {
	transform: rotate(45deg);
}

.block-collapse__body {
	padding: 0 0 0.6em 1.1em;
}

.block-collapse__body > *:first-child {
	margin-top: 0;
}

.block-collapse__body > *:last-child {
	margin-bottom: 0;
}

/* —— 时间线 —— */

.block-timeline {
	list-style: none;
	margin: 1.6em 0;
	padding: 0 0 0 1.1em;
	border-left: 1px solid var(--line);
}

.block-timeline__item {
	display: grid;
	grid-template-columns: 6.5em 1fr;
	gap: 0 1em;
	position: relative;
	padding: 0.35em 0;
}

/* 时间点上的小方块，作为轴线上的刻度 */
.block-timeline__item::before {
	content: "";
	position: absolute;
	left: -1.1em;
	top: 0.95em;
	width: 5px;
	height: 5px;
	margin-left: -3px;
	background: var(--fg-muted);
}

.block-timeline__time {
	font-family: var(--font-mono);
	font-size: 0.8em;
	color: var(--fg-muted);
	white-space: nowrap;
}

.block-timeline__text {
	color: var(--fg);
}

@media (max-width: 560px) {
	.block-timeline__item {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* —— 代码块 —— */

.block-code {
	margin: 1.6em 0;
}

.block-code__name {
	margin: 0;
	padding: 0.4em 0.9em;
	font-family: var(--font-mono);
	font-size: 0.78em;
	color: var(--fg-muted);
	background: var(--bg-soft);
	border-bottom: 1px solid var(--line);
}

.block-code__name + .block-code__pre {
	margin-top: 0;
}

/* 文件名与语言标记：一行两端，语言用弱一档的字重。 */
.block-code__file {
	color: var(--fg-muted);
}

.block-code__lang {
	margin-left: 0.8em;
	padding: 0.05em 0.5em;
	font-size: 0.92em;
	color: var(--fg-muted);
	border: 1px solid var(--line);
	border-radius: 3px;
}

/* —— 代码高亮 ——
 * 只用四个色调，都从主题既有变量派生，不引入新颜色。
 * 关键字用强调色（代码绿），字符串用暖色，注释压到最弱，数字介于中间。
 */
.block-code .hl-keyword {
	color: var(--link);
}

.block-code .hl-string {
	color: var(--fg-strong);
}

.block-code .hl-number {
	color: var(--fg);
}

.block-code .hl-comment {
	color: var(--fg-muted);
	font-style: italic;
}

/* —— 图片对比 ——
 * 两张图叠在同一格：底图正常铺，上层图被 clip-path 从右往左裁。
 * 位置由根节点上的 --cmp-pos 决定，滑块只改这一个值。
 */

.block-compare {
	margin: 1.8em 0;
}

.block-compare__stage {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--bg-soft);
	aspect-ratio: var(--cmp-ratio, 16 / 9);
}

.block-compare__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 对比图的重点是内容差异，不要被选中高亮包住。 */
	user-select: none;
	-webkit-user-drag: none;
}

.block-compare__clip {
	position: absolute;
	inset: 0;
	display: block;
	clip-path: inset(0 0 0 var(--cmp-pos, 50%));
	/* 拖动时让裁切跟手，但不要有延迟感。 */
	will-change: clip-path;
}

/* 分隔线：与裁切位置共用同一个变量，不会各走各的。 */
.block-compare__bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--cmp-pos, 50%);
	width: 2px;
	margin-left: -1px;
	background: var(--fg-strong);
	opacity: 0.85;
	pointer-events: none;
}

/* 手柄：线的中点一个小圆，暗示「可以拖」。 */
.block-compare__bar::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2em;
	height: 2em;
	margin: -1em 0 0 -1em;
	border: 2px solid var(--fg-strong);
	border-radius: 50%;
	background: var(--bg);
	opacity: 0.9;
}

/* 左右角标 */
.block-compare__tag {
	position: absolute;
	top: 0.7em;
	padding: 0.1em 0.55em;
	font-family: var(--font-mono);
	font-size: 0.72em;
	letter-spacing: 0.05em;
	color: var(--fg-strong);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 3px;
	pointer-events: none;
}

.block-compare__tag--before {
	left: 0.7em;
}

.block-compare__tag--after {
	right: 0.7em;
}

/*
 * 真正的操作元素。铺满整个画面、完全透明，
 * 这样鼠标按下画面任意一处都能拖，不必精准点到那条细线。
 */
.block-compare__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}

.block-compare__range:focus-visible ~ .block-compare__bar {
	outline: 2px solid var(--link);
	outline-offset: 2px;
}

/* —— 概览信息 —— */

.block-overview {
	margin: 1.8em 0;
}

.block-overview__head {
	display: flex;
	align-items: flex-start;
	gap: 1.1em;
	margin-bottom: 1.2em;
}

.block-overview__avatar {
	flex: 0 0 auto;
	width: 4.2em;
	height: 4.2em;
	object-fit: cover;
	border: 1px solid var(--line);
	border-radius: 4px;
}

.block-overview__intro {
	min-width: 0;
	color: var(--fg);
}

.block-overview__intro > *:first-child {
	margin-top: 0;
}

.block-overview__intro > *:last-child {
	margin-bottom: 0;
}

.block-overview__list {
	margin: 0;
	border-top: 1px solid var(--line);
}

/* 与日志列表同构：固定宽度的标签列 + 自适应内容列。 */
.block-overview__row {
	display: flex;
	align-items: baseline;
	gap: 1em;
	padding: 0.5em 0;
	border-bottom: 1px solid var(--line);
}

.block-overview__label {
	flex: 0 0 7em;
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.78em;
	letter-spacing: 0.05em;
	color: var(--fg-muted);
}

.block-overview__value {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--fg-strong);
}

/* —— 相册 ——
 * 用 CSS 多列做瀑布流：不用 JS 计算布局，图片加载完自然回流。
 * 列数由 --gal-cols 控制，断点只改这一个值。
 */

.block-gallery {
	margin: 1.8em 0;
}

.block-gallery__grid {
	columns: var(--gal-cols, 3);
	column-gap: 0.7em;
}

/* 列数：由 PHP 输出的 --gal-cols 决定，这里给四档兜底值。 */
.block-gallery__grid--c1 {
	--gal-cols: 1;
}

.block-gallery__grid--c2 {
	--gal-cols: 2;
}

.block-gallery__grid--c3 {
	--gal-cols: 3;
}

.block-gallery__grid--c4 {
	--gal-cols: 4;
}

.block-gallery__item {
	margin: 0 0 0.7em;
	/* 关键：阻止 figure 在多列布局里被拆到两列之间。 */
	break-inside: avoid;
	page-break-inside: avoid;
}

.block-gallery__open {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--bg-soft);
	cursor: zoom-in;
	overflow: hidden;
	line-height: 0;
	transition: border-color 0.15s ease;
}

.block-gallery__open:hover {
	border-color: var(--fg-muted);
}

.block-gallery__open img {
	display: block;
	width: 100%;
	height: auto;
	/* 图片本身不加圆角，让外层容器统一裁。 */
	transition: transform 0.25s ease;
}

.block-gallery__open:hover img {
	transform: scale(1.02);
}

.block-gallery__caption {
	margin-top: 0.35em;
	font-family: var(--font-mono);
	font-size: 0.72em;
	line-height: 1.5;
	color: var(--fg-muted);
}

/* 灯箱：原生 dialog，Esc 关闭与焦点陷阱都由浏览器负责。 */
.block-gallery__lightbox {
	position: relative;
	max-width: min(92vw, 1200px);
	max-height: 92vh;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--bg);
	color: var(--fg);
}

.block-gallery__lightbox::backdrop {
	background: rgba(0, 0, 0, 0.82);
}

.block-gallery__lightbox figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.block-gallery__lightbox img {
	display: block;
	max-width: 92vw;
	max-height: 82vh;
	width: auto;
	height: auto;
}

.block-gallery__lightbox figcaption {
	padding: 0.6em 1em;
	font-family: var(--font-mono);
	font-size: 0.76em;
	color: var(--fg-muted);
	text-align: center;
}

.block-gallery__close {
	position: absolute;
	top: 0.4em;
	right: 0.5em;
	width: 1.9em;
	height: 1.9em;
	padding: 0;
	font-size: 1.1em;
	line-height: 1;
	color: var(--fg-muted);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 3px;
	cursor: pointer;
	z-index: 2;
}

.block-gallery__close:hover {
	color: var(--fg-strong);
	border-color: var(--fg-muted);
}

@media (max-width: 640px) {
	/* 手机上两列已经是上限，再窄就只剩一条缝。 */
	.block-gallery__grid {
		columns: min(var(--gal-cols, 3), 2);
	}

	.block-overview__row {
		display: block;
	}

	.block-overview__label {
		margin-bottom: 0.15em;
	}
}

/* —— 上一篇 / 下一篇 —— */

.log-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5em;
	margin-top: 3em;
	padding-top: 1.4em;
	border-top: 1px solid var(--line);
}

.log-nav__item {
	display: block;
	text-decoration: none;
	min-width: 0;
}

.log-nav__item--next {
	text-align: right;
}

.log-nav__label {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.72em;
	letter-spacing: 0.06em;
	color: var(--fg-muted);
}

.log-nav__title {
	display: block;
	margin-top: 0.25em;
	color: var(--fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.log-nav__item:hover .log-nav__title {
	color: var(--link);
}

@media (max-width: 560px) {
	.log-nav {
		grid-template-columns: 1fr;
		gap: 1.2em;
	}

	.log-nav__item--next {
		text-align: left;
	}
}

/* —— 阅读数 —— */

.log-views {
	font-family: var(--font-mono);
	font-size: 0.85em;
	color: var(--fg-muted);
}

/* —— 日志反馈（暂记 / 有用）—— */

.log-rating {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin: 2.2em 0 0;
}

.log-rating__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.32em 0.75em;
	font-family: var(--font-mono);
	font-size: 0.8em;
	line-height: 1.4;
	color: var(--fg-muted);
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 3px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.log-rating__btn:hover:not(:disabled) {
	color: var(--link);
	border-color: var(--link);
}

.log-rating__btn:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 2px;
}

.log-rating__icon {
	flex: none;
	margin-top: -1px;
}

.log-rating__count {
	font-variant-numeric: tabular-nums;
	color: inherit;
	opacity: 0.72;
}

/* 已表态：去掉交互暗示，颜色退回强调色以示「已完成」。 */
.log-rating__btn.is-done {
	color: var(--link);
	border-color: var(--line);
	cursor: default;
}

.log-rating__btn.is-done .log-rating__count {
	opacity: 1;
}

.log-rating__btn.is-busy {
	opacity: 0.55;
	cursor: progress;
}

.log-rating__btn.is-ok {
	border-color: var(--link);
}

.log-rating__btn.is-err {
	border-color: #d9534f;
	color: #d9534f;
}

@media (prefers-reduced-motion: reduce) {
	.log-rating__btn {
		transition: none;
	}
}

/* —— 回到顶部 —— */

.to-top {
	position: fixed;
	right: 24px;
	bottom: 28px;
	width: 34px;
	height: 34px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	/*
	 * 必须高过大纲（z-index 5）：两者都贴右缘，
	 * 叠在一起时按钮要能收得到点击。
	 */
	z-index: 6;

	font-family: var(--font-mono);
	font-size: 15px;
	line-height: 1;
	color: var(--fg-muted);

	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;

	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease, color 0.15s ease,
		border-color 0.15s ease;
}

.to-top.is-on {
	opacity: 1;
	visibility: visible;
}

.to-top:hover {
	color: var(--fg-strong);
	border-color: var(--fg-muted);
}

/* 窄屏把按钮抬高一点，别压到内容 */
@media (max-width: 560px) {
	.to-top {
		right: 16px;
		bottom: 18px;
	}
}

/* ==========================================================================
   8. 页面区块标题 / 空状态 / 分页
   ========================================================================== */

.block-head {
	/*
	 * 标题与右侧操作同一排、两端对齐：
	 * 公开侧只有标题一个子元素，靠左；私密侧多一个「锁定」，顶到行尾。
	 * 用 baseline 对齐，两者的文字底线是齐的。
	 */
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;

	font-weight: 600;
	font-family: var(--font-body);
	font-size: 0.9em;
	color: var(--fg-strong);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 1.4em;
	padding-bottom: 0.7em;
	border-bottom: 1px solid var(--line);
}

/* 行尾操作（如「锁定」）：比标题轻一档，安静地待在右边 */
.block-head__action {
	color: var(--fg-muted);
	font-weight: 400;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.block-head__action:hover {
	color: var(--fg-strong);
}

/* --------------------------------------------------------------------------
   「日志列表」区块：可自由放置的日志流，复用 .log-list 的结构。
   -------------------------------------------------------------------------- */

.block-posts {
	margin: 0 0 2.6em;
}

/* 标题行：把 .block-head 的下边距收掉，改由包裹层统一负责间距。 */
.block-posts__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.block-posts__head .block-head {
	flex: 1 1 auto;
	margin: 0;
}

/* 「更多」链接：与标题行同一排右对齐，轻一档。 */
.block-posts__more {
	flex: 0 0 auto;
	font-family: var(--font-body);
	font-size: 0.85em;
	color: var(--fg-muted);
	white-space: nowrap;
}

.block-posts__more:hover {
	color: var(--link);
}

.block-posts__head + .log-list {
	margin-top: 1.4em;
}

/* 网格排列：两列，窄屏回落单列。标题在网格里换行，日期挪到上方小字。 */
.log-list--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 32px;
}

.log-list--grid .log-item {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.log-list--grid .log-item__date {
	flex: 0 0 auto;
	order: -1;
}

.log-list--grid .log-item__title {
	font-size: 1.0625em;
}

@media (max-width: 640px) {
	.log-list--grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 私密日志在列表里的锁标记：与状态灯同位置，颜色压低不抢眼。 */
.log-item__lock {
	margin-left: auto;
	font-size: 0.8em;
	opacity: 0.5;
}

.empty {
	color: var(--fg-muted);
	font-family: var(--font-body);
	font-size: 0.9em;
	padding: 2em 0;
}

.pagination {
	margin-top: 2.6em;
	font-family: var(--font-body);
	font-size: 0.9em;
	display: flex;
	justify-content: space-between;
	gap: 1em;
}

/* ==========================================================================
   8.5 归档时间线（/log/）
   --------------------------------------------------------------------------
   首页给最新一屏，归档负责回溯全部：年份 → 月份 → 日志条目。
   条目完全复用 .log-item（含窄屏 grid），这里只定义年/月两级分组头。
   年与月均用原生 <details>/<summary> 折叠，无 JS 也能展开/收起。
   ========================================================================== */

/* 年份：两组之间留足空隙，其余交给字号字重 */
.arc-year {
	margin-top: 2.2em;
}

.arc-year:first-of-type {
	margin-top: 0;
}

/*
 * summary 的默认三角形小图标与整体冷峻气质不搭，统一去掉，
 * 换成一条可旋转的短竖线/横线组合，指示折叠状态。
 */
.arc-year__head,
.arc-month__head {
	list-style: none;
	cursor: pointer;
}

.arc-year__head::-webkit-details-marker,
.arc-month__head::-webkit-details-marker {
	display: none;
}

/*
 * 年份行：年份贴左、条数贴右。
 * 折叠箭头用绝对定位放到最左，避免它作为 flex 子项参与 space-between
 * 的分配（否则中间的年份会被推到正中央）。
 */
.arc-year__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--font-body);
	font-size: 1.05em;
	font-weight: 700;
	color: var(--fg-strong);
	letter-spacing: 0.04em;
	margin: 0 0 0.9em;
	padding-left: 1.15rem; /* 给折叠箭头让位；用 rem 保证与月份行对齐 */
	position: relative;
}

.arc-year__count {
	color: var(--fg-muted);
	font-weight: 400;
	font-size: 0.85em;
}

/* 年份折叠指示：summary 左侧的短竖线 */
.arc-year__head::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0.65em;
	height: 0.65em;
	margin-top: -0.42em;
	border-left: 2px solid var(--fg-muted);
	border-top: 2px solid var(--fg-muted);
	transform: rotate(135deg); /* 收起态指向右 */
	transition: transform 0.15s ease;
}

.arc-year[open] > .arc-year__head::before {
	transform: rotate(45deg); /* 展开态 */
}

/* 月份行：与 .block-head 同一套两端对齐，轻一档 */
.arc-month {
	margin: 0 0 1.6em;
}

.arc-month__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--font-body);
	font-size: 0.85em;
	font-weight: 600;
	color: var(--fg-strong);
	letter-spacing: 0.04em;
	margin: 0 0 0.5em;
	padding-left: 1.15rem; /* 与年份头用同一个固定缩进值，保证左缘对齐 */
	position: relative;
}

/* 月份折叠指示：更轻的短竖线 */
.arc-month__head::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0.5em;
	height: 0.5em;
	margin-top: -0.3em;
	border-left: 2px solid var(--fg-muted);
	border-top: 2px solid var(--fg-muted);
	transform: rotate(135deg);
	transition: transform 0.15s ease;
}

.arc-month[open] > .arc-month__head::before {
	transform: rotate(45deg);
}

/* 条数：像 ls -l 的 count 列，安静地待在行尾 */
.arc-month__count {
	color: var(--fg-muted);
	font-weight: 400;
}

/* ==========================================================================
   9. 私密日志：密码门
   --------------------------------------------------------------------------
   照克制的做法：不做锁头图形、不做卡片容器，就是一行文字 + 一行输入。
   ========================================================================== */

.gate {
	margin: 4em 0;
	max-width: 340px;
}

.gate__label {
	font-family: var(--font-body);
	font-size: 0.9em;
	color: var(--fg-muted);
	margin: 0 0 1em;
}

.gate__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	border-bottom: 1px solid var(--fg-muted);
	padding-bottom: 6px;
}

.gate__row:focus-within {
	border-bottom-color: var(--fg-strong);
}


.gate__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: none;
	color: var(--fg-strong);
	font-family: var(--font-body);
	font-size: 0.9em;
	padding: 0;
}

/*
 * 输入框只要一条横线，不要框。
 * 全局的 :focus-visible 会给聚焦元素描一圈强调色（绿）边框，
 * 在这里必须摁掉 —— 否则一点输入框就冒出个绿框。
 * 聚焦反馈改由下方那条横线变深来承担（见 .gate__row:focus-within）。
 */
.gate .gate__input:focus,
.gate .gate__input:focus-visible,
.gate .gate__submit:focus,
.gate .gate__submit:focus-visible {
	outline: none;
	box-shadow: none;
}

.gate__input::placeholder {
	color: var(--fg-muted);
	opacity: 0.6;
}

.gate__submit {
	border: 0;
	background: none;
	color: var(--link);
	font-family: var(--font-body);
	font-size: 0.9em;
	cursor: pointer;
	padding: 0;
	flex: 0 0 auto;
}

.gate__submit:hover {
	text-decoration: underline;
}

.gate__msg {
	font-family: var(--font-body);
	font-size: 0.9em;
	margin: 1em 0 0;
	min-height: 1.2em;
	color: var(--fg-muted);
}

.gate__msg.is-error {
	color: var(--dot-low);
}

.gate__msg.is-ok {
	color: var(--dot-high);
}

/* ==========================================================================
   10. 评论区：只做轻量对齐，保持 WordPress 默认结构的语义
   ========================================================================== */

.comments {
	margin-top: 4em;
	padding-top: 1.6em;
	border-top: 1px dashed var(--line);
}

.comments h2,
.comments h3 {
	font-size: 1em;
	font-family: var(--font-body);
	color: var(--fg-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 400;
}

.comments ol,
.comments ul {
	list-style: none;
	padding: 0;
}

.comments li {
	padding: 1.1em 0;
	border-bottom: 1px solid var(--line);
}

.comments li ul,
.comments li ol {
	margin-top: 1.1em;
	padding-left: 1.4em;
	border-left: 1px solid var(--line);
}

.comments li ul li:last-child,
.comments li ol li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.comment-meta,
.comment-metadata {
	font-family: var(--font-body);
	font-size: 0.85em;
	color: var(--fg-muted);
}

.comment-metadata a,
.comment-meta a {
	color: var(--fg-muted);
}

.comment-author {
	color: var(--fg-strong);
	font-size: 0.9em;
}

.comment-content {
	font-size: 0.9em;
	margin-top: 0.3em;
}

.comment-reply-link,
.comment-edit-link {
	font-family: var(--font-body);
	font-size: 0.85em;
	color: var(--fg-muted);
}

.comments .children {
	padding-left: 0;
}

.comment-respond {
	margin-top: 2.4em;
}

.comment-form label {
	display: block;
	font-family: var(--font-body);
	font-size: 0.9em;
	color: var(--fg-muted);
	margin-bottom: 0.4em;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 0.9em;
	padding: 9px 11px;
	margin-bottom: 1em;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	outline: 0;
	border-color: var(--fg-muted);
}

.comment-form .submit,
.comment-form input[type="submit"] {
	background: var(--link);
	border: 0;
	border-radius: var(--radius);
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 0.9em;
	padding: 9px 18px;
	cursor: pointer;
}

.comment-form .submit:hover,
.comment-form input[type="submit"]:hover {
	opacity: 0.88;
}

.comment-notes,
.logged-in-as,
.comment-form-cookies-consent {
	font-family: var(--font-body);
	font-size: 0.85em;
	color: var(--fg-muted);
}

.required {
	color: var(--dot-low);
}

/* ==========================================================================
   11. 搜索 / 404 / 通用表单
   ========================================================================== */

.search-form {
	display: flex;
	align-items: baseline;
	gap: 10px;
	border-bottom: 1px solid var(--fg-muted);
	padding-bottom: 6px;
	max-width: 420px;
	margin-bottom: 2.4em;
}

.search-form input[type="search"] {
	flex: 1 1 auto;
	border: 0;
	outline: 0;
	background: none;
	color: var(--fg-strong);
	font-family: var(--font-body);
	font-size: 0.9em;
}

.search-form input[type="submit"],
.search-form button {
	border: 0;
	background: none;
	color: var(--fg-muted);
	font-family: var(--font-body);
	font-size: 0.9em;
	cursor: pointer;
}

.search-form input[type="submit"]:hover,
.search-form button:hover {
	color: var(--link);
}

.not-found {
	padding: 3em 0;
}

.not-found__code {
	font-family: var(--font-body);
	font-size: 3em;
	font-weight: 600;
	color: var(--fg-strong);
	margin: 0;
	line-height: 1;
}

.not-found__text {
	font-family: var(--font-body);
	font-size: 0.9em;
	color: var(--fg-muted);
	margin: 1.2em 0 2em;
}

/* ==========================================================================
   12. 主题切换
   --------------------------------------------------------------------------
   与状态灯共用同一套视觉语言：圆点表示状态。
   亮色 = 空心圆（描边），暗色 = 实心圆。全站不用文字说明当前主题。
   ========================================================================== */

.theme-toggle {
	display: inline-flex;
	align-items: center;
	border: 0;
	background: none;
	cursor: pointer;
	margin: 0;
	/* 视觉上是小圆点，但点击区域撑到 24px 以上，满足无障碍要求。
	   用负 margin 抵消 padding，避免在导航里撑开间距。 */
	padding: 8px 9px;
	margin: -8px -9px;
	line-height: 0;
}

.theme-toggle__dot {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;

	/*
	 * 暗色为默认 = 点亮：实心黄 + 三层柔光。
	 * 用的是状态灯「一般」那一档的黄，不是某个新颜色 ——
	 * 它跟日志列表里的三个灯是同一套色，是同一族里的第四个成员。
	 */
	background: var(--dot-mid);
	border: 1px solid var(--dot-mid);
	box-shadow:
		0 0 4px var(--glow-near),
		0 0 10px var(--glow-mid),
		0 0 20px var(--glow-far);
	transition: background-color 0.2s ease, border-color 0.2s ease,
		box-shadow 0.3s ease;
}

/* 亮色：空心，只有一圈灰描边，安静地待在角落 */
:root[data-theme="light"] .theme-toggle__dot {
	background: none;
	border-color: var(--fg-muted);
	box-shadow: none;
}

/* 悬停：暗色下光晕铺开，像把灯再调亮一点 */
.theme-toggle:hover .theme-toggle__dot {
	border-color: var(--fg-strong);
	box-shadow:
		0 0 6px var(--glow-near),
		0 0 15px var(--glow-mid),
		0 0 30px var(--glow-far);
}

/* 亮色下悬停只把描边转深，不发光 */
:root[data-theme="light"] .theme-toggle:hover .theme-toggle__dot {
	border-color: var(--fg-strong);
	box-shadow: none;
}

/* ==========================================================================
   13. 文章大纲（TOC）
   --------------------------------------------------------------------------
   目录贴浏览器右缘固定，正文（720px 单栏）保持不动。

   为什么用 fixed 而不是把正文挤成两栏：
   单栏是这套设计的核心 —— 一行 40 来个字，眼睛不用来回扫。为了放大纲
   把正文压到 560px 会毁掉这个阅读节奏。目录是「辅助」，不该抢主位。

   图标 / 计数 / 层级全靠文字本身表达：二级标题常规，三级标题淡一档且
   左缩进，当前阅读项用主色高亮。没有圆点、没有竖线、没有动画特效。
   ========================================================================== */

.toc {
	position: fixed;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	width: 200px;
	z-index: 5;

	/*
	 * 关键：只有列表本身可以点，容器其它区域一律放行。
	 * 大纲是固定定位的竖条，会盖住右下角的「回到顶部」按钮 ——
	 * 不加这行的话按钮点不动（透明区域照样拦截指针事件）。
	 */
	pointer-events: none;

	/* 顶部与底部一起淡出，让长列表看起来是「延伸出去」而不是被切断。 */
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 18px,
		#000 calc(100% - 18px),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 18px,
		#000 calc(100% - 18px),
		transparent 100%
	);
}

/* 把可点击区域还回来：只有盒子内才接收事件。 */
.toc__box {
	pointer-events: auto;
}

/*
 * 展开 / 收起时的过渡。
 * auto 模式靠 .is-visible 控制，always 模式一直可见。
 */
.toc--auto {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.toc--auto.is-visible {
	opacity: 1;
	visibility: visible;
}

.toc__box {
	/*
	 * 高度上限由脚本按「视口高 - 2 ×（头部 + 40）」算出来写进 style，
	 * 这里只给兜底值，并允许内部独立滚动。
	 */
	max-height: 60vh;
	overflow-y: auto;
	overflow-x: hidden;

	/* 隐藏大纲自己的滚动条 —— 它太窄，一条滚动条会盖住文字。 */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.toc__box::-webkit-scrollbar {
	display: none;
}

.toc__head {
	margin: 0 0 0.55em;
	font-family: var(--font-mono);
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

.toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.toc__item {
	margin: 0;
	line-height: 1.5;
}

/* 二级标题：常规字重，主字号 */
.toc__item--h2 {
	font-size: 0.78em;
}

/* 三级标题：淡一档、左缩进，层级靠视觉重量区分而非符号 */
.toc__item--h3 {
	padding-left: 0.9em;
	font-size: 0.72em;
}

.toc__link {
	display: block;
	padding: 0.3em 0;
	color: var(--fg-muted);
	text-decoration: none;

	/* 大纲项一律单行截断，长度差异太大时会显得参差。 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	transition: color 0.15s ease;
}

.toc__link:hover {
	color: var(--fg-strong);
}

/*
 * 当前阅读项：用主题强调色（绿）点亮。
 * 这是整块目录里唯一有颜色的地方，视线自然被牵引过去。
 */
.toc__item.is-active > .toc__link {
	color: var(--link);
}

/* 窄屏与中屏不显示大纲：没地方放，硬塞会压到正文 */
@media (max-width: 1280px) {
	.toc {
		display: none;
	}
}

/* ==========================================================================
   14. 无障碍
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
   15. 窄屏
   --------------------------------------------------------------------------
   极简做法：不加断点系统，只在需要时调整一处。
   这里把小屏下日期与标题折成上下两行，状态灯留在日期行。
   ========================================================================== */

@media (max-width: 560px) {
	html body {
		padding: 28px 18px 60px;
	}

	/*
	 * 窄屏改两行网格：第一行「日期 …… 灯」，第二行标题独占。
	 * 不能用 flex 换行实现 —— 换行只会往后掉，灯回不到日期那一行；
	 * 网格直接用行号点名，DOM 顺序不用动。
	 */
	.log-item {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: baseline;
		gap: 2px 10px;
	}

	.log-item__date {
		grid-column: 1;
		grid-row: 1;
	}

	.log-item .dots {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		justify-self: end;
		margin-left: 0;
		padding-left: 0;
	}

	.log-item__title {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 2px;
	}

	.site-foot {
		flex-direction: column;
		gap: 0.3em;
	}
}