/*
Theme Name: TechMinimal
Theme URI: https://example.com/themes/techminimal
Author: TechMinimal Contributors
Author URI: https://example.com
Description: 面向程序员与技术写作者的极简块主题。内容优先、零依赖、秒开：全局样式由 theme.json 驱动，前端仅加载原生 CSS 与少量 Vanilla JS，排版采用支持中英文的系统字体栈。
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.11
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: techminimal
Tags: blog, one-column, block-patterns, block-styles, custom-colors, editor-style, full-site-editing, news, sticky-post, threaded-comments, translation-ready, wide-blocks
*/

/*
 * ==========================================================================
 * 本文件只承载 theme.json 无法表达的补充样式。
 * 颜色、字号、间距、区块默认外观一律优先在 theme.json 中维护，
 * 以求编辑器与前台看到的效果完全一致。
 * 加载策略：无 @import，无外部字体请求，全部为本地静态规则。
 * ==========================================================================
 */

/* --------------------------------------------------------------------------
 * 01. 排版细节
 * ------------------------------------------------------------------------ */

p,
li,
figcaption,
.wp-block-post-excerpt__excerpt {
	text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-post-title,
.wp-block-query-title {
	text-wrap: balance;
}

/* 链接下划线随文字粗细自适应，并让下划线略微离开字形。 */
a:where(:not(.wp-element-button)) {
	text-decoration-thickness: from-font;
	text-underline-offset: 0.22em;
	transition: color var(--wp--custom--transition--fast);
}

/* 统一的可聚焦状态：键盘用户可见，鼠标点击不产生干扰。 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--small);
}

::selection {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
	color: var(--wp--preset--color--contrast);
}

/* 锚点跳转保留呼吸感，同时尊重"减少动态效果"的系统设置。 */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
 * 02. 代码与技术内容
 * ------------------------------------------------------------------------ */

.wp-block-code,
.wp-block-preformatted,
.wp-block-code code,
kbd,
samp {
	font-variant-ligatures: none;
	tab-size: 4;
	-moz-tab-size: 4;
}

/* 长代码行在块内横向滚动，绝不撑破版面。 */
.wp-block-code,
.wp-block-preformatted {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.wp-block-code code {
	background: none;
	padding: 0;
	font-size: inherit;
}

/* 行内代码：不带边框，用底色区分，避免正文出现密集线条。 */
:where(p, li, td, h1, h2, h3, h4, h5, h6) > code {
	background-color: var(--wp--preset--color--subtle);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.15em 0.35em;
	font-size: 0.9em;
}

/* 表格在窄屏横向滚动，保持语义完整。 */
.wp-block-table {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table :where(th, td) {
	border-bottom: var(--wp--custom--border--hairline);
	padding: 0.6em 0.8em;
	text-align: left;
}

.wp-block-table thead th {
	border-bottom: 2px solid var(--wp--preset--color--border);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * 03. 引用与分隔
 * ------------------------------------------------------------------------ */

/* theme.json 的 border 只能四边同值，这里补上左侧强调竖线。 */
.wp-block-quote {
	border: 0;
	border-left: 3px solid var(--wp--preset--color--accent);
	padding: 0.25em 0 0.25em 1.25em;
}

.wp-block-quote.is-style-plain {
	border-left-color: var(--wp--preset--color--border);
}

.wp-block-pullquote {
	border: 0;
	margin-block: var(--wp--preset--spacing--50);
	text-align: left;
}

.wp-block-pullquote blockquote {
	border: 0;
	margin: 0;
	padding: 0;
}

.wp-block-pullquote p {
	margin: 0;
}

.wp-block-pullquote cite {
	display: block;
	margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
 * 04. 媒体
 * ------------------------------------------------------------------------ */

/* 结构层面防止图片导致布局位移（宽高由核心输出的 width/height 属性决定）。 */
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-gallery img {
	display: block;
	height: auto;
}

/* 懒加载图片在解码完成前保持轻微透明度过渡，避免"逐行刷出"的割裂感。 */
.wp-block-image img[loading="lazy"] {
	transition: opacity var(--wp--custom--transition--base);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-image img[loading="lazy"] {
		transition: none;
	}
}

/* 视频与嵌入内容自适应容器宽度，避免溢出。 */
.wp-block-embed__wrapper,
.wp-block-video {
	max-width: 100%;
}

.wp-block-embed__wrapper :where(iframe, video) {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
 * 05. 导航与交互控件
 * ------------------------------------------------------------------------ */

.wp-block-navigation .wp-block-navigation__submenu-container {
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--small);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: 0.25rem;
}

.wp-block-navigation-item a {
	text-decoration: none;
}

.wp-block-navigation-item a:hover {
	text-decoration: underline;
	text-decoration-thickness: from-font;
	text-underline-offset: 0.22em;
}

/* 菜单开合与搜索展开等由核心处理，这里只统一过渡时长。 */
.wp-block-navigation__responsive-container,
.wp-block-search__input {
	transition: background-color var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast);
}

.wp-block-search__input {
	background-color: var(--wp--preset--color--base);
}

/* 分页、标签云等元信息统一克制的视觉重量。 */
.wp-block-post-navigation-link,
.wp-block-query-pagination {
	font-size: var(--wp--preset--font-size--small);
}

/* HTML 与 PDF 形式的内容在打印时回到纯黑白，节省墨水。 */
@media print {
	.wp-block-navigation,
	.wp-block-search,
	.wp-block-query-pagination,
	.wp-block-post-navigation-link {
		display: none;
	}

	a:where(:not(.wp-element-button)) {
		color: inherit;
		text-decoration: underline;
	}
}

/* --------------------------------------------------------------------------
 * 06. 深浅色令牌
 * ------------------------------------------------------------------------ */

/*
 * 配色模式的唯一事实来源是 <html data-theme="dark|light">，由 head 里的
 * 内联脚本在首屏绘制前写好（默认跟随系统，用户手动切换后以本地存储为准）。
 *
 * 核心把 --wp--preset--color-* 定义在 :root 上，这里用 html[data-theme]
 * 提升优先级改写这些变量。好处是所有引用预设色的区块（包括在编辑器里
 * 手选过颜色的段落）都会自动跟着切换，不必逐条重写选择器。
 */

html {
	color-scheme: light;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
	color-scheme: dark;

	--wp--preset--color--base: var(--wp--custom--dark--base);
	--wp--preset--color--surface: var(--wp--custom--dark--surface);
	--wp--preset--color--contrast: var(--wp--custom--dark--contrast);
	--wp--preset--color--muted: var(--wp--custom--dark--muted);
	--wp--preset--color--subtle: var(--wp--custom--dark--subtle);
	--wp--preset--color--border: var(--wp--custom--dark--border);
	--wp--preset--color--accent: var(--wp--custom--dark--accent);
	--wp--preset--color--accent-strong: var(--wp--custom--dark--accent-strong);
	--wp--preset--shadow--soft: var(--wp--custom--dark--shadow);
}

/* 切换主题时给底色一点过渡，避免整屏闪断。 */
body {
	transition: background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

/* 深色下图片白底刺眼的问题很常见，这里只对纯品牌图标类图片做处理，不改照片。 */
html[data-theme="dark"] .wp-block-image.is-style-logo img {
	background-color: #ffffff;
	border-radius: var(--wp--custom--radius--small);
	padding: 0.25rem;
}

/* --------------------------------------------------------------------------
 * 07. 布局骨架
 * ------------------------------------------------------------------------ */

.wp-block-group.tm-main {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

/*
 * 主内容 700px + 可选侧边栏 320px。
 * 用 :has() 判断侧边栏列是否存在：在编辑器里直接删掉侧边栏那一列，
 * 正文会自动回到居中 700px，不需要改 CSS。
 */
/*
 * 版心宽度在这里再显式声明一次，不依赖 alignwide 所对应的约束类。
 * 原因：有些优化/缓存插件会重写或合并样式表，也可能有环境让 .wp-site-blocks
 * 拿不到 is-layout-constrained，此时 alignwide 只剩一个类名，版心会退化成整屏宽、
 * 内容贴到屏幕左边。这里写死 max-width + 居中后，两种情况下的版心都一致。
 */
.wp-block-group.tm-layout,
.wp-block-group.tm-portal-main {
	max-width: var(--wp--style--global--wide-size, 1120px);
	margin-inline: auto;
}

/*
 * 页头与页脚整体做了整宽出血（见第 08 节），所以它们的内部容器要自己把
 * 左右内边距补回来：宽度按"版心 + 两侧内边距"算，内容才对得上下方正文。
 */
.wp-block-group.tm-header__inner,
.wp-block-group.tm-footer__inner {
	max-width: calc( var(--wp--style--global--wide-size, 1120px) + 2 * var(--wp--style--root--padding-left, 1.5rem) );
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1.5rem) var(--wp--style--root--padding-right, 1.5rem);
}

/* 单篇文章与归档的阅读列：700px（404 通过区块属性改成 640px，变量会跟着走）。 */
.wp-block-group.tm-main {
	max-width: var(--wp--style--global--content-size, 700px);
	margin-inline: auto;
}

.wp-block-group.tm-layout {
	display: grid;
	grid-template-columns: minmax(0, var(--wp--custom--layout--content)) minmax(0, var(--wp--custom--layout--sidebar));
	gap: var(--wp--custom--layout--gap);
	justify-content: space-between;
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.wp-block-group.tm-layout > * {
	margin-block-start: 0;
}

.wp-block-group.tm-layout:not(:has(> .tm-layout__side)) {
	grid-template-columns: minmax(0, var(--wp--custom--layout--content));
	justify-content: center;
}

/* --------------------------------------------------------------------------
 * 08. 页头
 * ------------------------------------------------------------------------ */

/*
 * sticky 元素只能在父容器的高度范围内滑动，而 core/template-part 会输出一层
 * 高度等于页头本身的包裹 div。所以真正需要吸顶的是那个包裹层，页头只负责外观。
 *
 * 同时把包裹层拉出根节点的左右内边距（根内边距由 theme.json 的
 * useRootPaddingAwareAlignments 生成），让吸顶底色与页脚背景真正贴到屏幕边缘，
 * 内容仍然由内部的 alignwide 容器与正文对齐。
 */
.wp-site-blocks > .wp-block-template-part:has(> .tm-header),
.wp-site-blocks > .wp-block-template-part:has(> .tm-footer) {
	margin-inline: calc( -1 * var(--wp--style--root--padding-left, 0px) ) calc( -1 * var(--wp--style--root--padding-right, 0px) );
}

.wp-site-blocks > .wp-block-template-part:has(> .tm-header) {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
}

.wp-block-group.tm-header {
	position: relative;
	background-color: var(--wp--preset--color--base);
	border-block-end: var(--wp--custom--border--hairline);
}

/* 支持 color-mix 的浏览器得到半透明毛玻璃效果，旧浏览器回退到纯色。 */
@supports ( background-color: color-mix( in srgb, red 50%, transparent ) ) {
	.wp-block-group.tm-header {
		background-color: color-mix( in srgb, var(--wp--preset--color--base) 86%, transparent );
		-webkit-backdrop-filter: saturate( 180% ) blur( 12px );
		backdrop-filter: saturate( 180% ) blur( 12px );
	}
}

.wp-block-group.tm-header__inner {
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
}

.wp-block-group.tm-brand,
.wp-block-group.tm-header__actions {
	gap: 0.5rem;
}

.tm-brand .wp-block-site-logo {
	margin: 0;
}

.tm-brand .wp-block-site-logo img {
	border-radius: var(--wp--custom--radius--small);
}

.wp-block-site-title.tm-brand__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

.tm-brand__title a,
.wp-block-site-title.tm-footer__title a {
	color: inherit;
	text-decoration: none;
}

.tm-brand__title a:hover {
	color: var(--wp--preset--color--accent);
}

.tm-actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.tm-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--small);
	background: transparent;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition: color var(--wp--custom--transition--fast),
		background-color var(--wp--custom--transition--fast),
		border-color var(--wp--custom--transition--fast);
}

.tm-icon-btn:hover {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--subtle);
}

.tm-icon-btn[aria-expanded="true"] {
	color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--subtle);
	border-color: var(--wp--preset--color--border);
}

.tm-icon {
	display: block;
}

/* 亮色显示月亮（点它变暗），暗色显示太阳。 */
.tm-theme-toggle .tm-icon--sun {
	display: none;
}

html[data-theme="dark"] .tm-theme-toggle .tm-icon--sun {
	display: block;
}

html[data-theme="dark"] .tm-theme-toggle .tm-icon--moon {
	display: none;
}

.tm-skip-link {
	position: absolute;
	inset-block-start: -4rem;
	inset-inline-start: var(--wp--preset--spacing--30);
	z-index: 100;
	padding: 0.5rem 1rem;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--small);
	text-decoration: none;
	transition: inset-block-start var(--wp--custom--transition--fast);
}

.tm-skip-link:focus {
	inset-block-start: 0.5rem;
}

.wp-block-group.tm-search-panel {
	display: none;
	padding-block-end: var(--wp--preset--spacing--40);
}

html.tm-search-open .wp-block-group.tm-search-panel {
	display: block;
}

/* --------------------------------------------------------------------------
 * 09. Hero 与区块标题
 * ------------------------------------------------------------------------ */

.wp-block-group.tm-hero {
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: var(--wp--custom--border--hairline);
	margin-block-end: var(--wp--preset--spacing--50);
}

.wp-block-site-title.tm-hero__title {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	letter-spacing: -0.028em;
	line-height: 1.12;
	margin: 0;
}

.tm-hero .tm-hero__tagline {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
}

.wp-block-group.tm-section-head {
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--40);
}

.wp-block-heading.tm-section-head__title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0;
}

/* --------------------------------------------------------------------------
 * 10. 卡片（区块样式 is-style-card）
 * ------------------------------------------------------------------------ */

.wp-block-group.is-style-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	transition: border-color var(--wp--custom--transition--hover),
		box-shadow var(--wp--custom--transition--hover),
		transform var(--wp--custom--transition--hover);
}

.wp-block-group.is-style-card > * {
	margin-block-start: 0;
}

.wp-block-group.is-style-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--soft);
	border-color: color-mix( in srgb, var(--wp--preset--color--accent) 38%, var(--wp--preset--color--border) );
}

.wp-block-group.is-style-card:focus-within {
	border-color: var(--wp--preset--color--accent);
}

.is-style-card .tm-card__media {
	margin: 0;
}

.is-style-card .tm-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-group.tm-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	flex: 1 1 auto;
	padding: var(--wp--preset--spacing--40);
}

.wp-block-group.tm-card__body > * {
	margin-block-start: 0;
}

.wp-block-group.tm-card__meta {
	gap: 0.35rem 0.75rem;
	align-items: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.wp-block-group.tm-card__meta > * {
	margin-block-start: 0;
}

.tm-card__meta a {
	color: inherit;
	text-decoration: none;
}

.tm-card__meta a:hover {
	color: var(--wp--preset--color--accent);
}

.wp-block-post-title.tm-card__title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.4;
	letter-spacing: -0.012em;
	margin: 0;
}

.tm-card__title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-group.is-style-card:hover .tm-card__title a {
	color: var(--wp--preset--color--accent);
}

.wp-block-post-excerpt.tm-card__excerpt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

.tm-card__excerpt p {
	margin: 0;
}

.tm-card__excerpt .wp-block-post-excerpt__more-text {
	margin-block-start: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* 卡片网格：列数由区块属性控制，这里只负责间距与等高。 */
.tm-post-grid .wp-block-post-template.is-layout-grid {
	gap: var(--wp--preset--spacing--40);
}

.tm-post-grid .wp-block-post-template.is-layout-grid > li {
	display: flex;
	margin-block-start: 0;
}

.tm-post-grid .wp-block-post-template.is-layout-grid > li > .wp-block-group {
	flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
 * 11. 归档列表
 * ------------------------------------------------------------------------ */

.wp-block-group.tm-archive-head {
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: var(--wp--custom--border--hairline);
	margin-block-end: var(--wp--preset--spacing--50);
}

.tm-archive__desc {
	color: var(--wp--preset--color--muted);
	margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-group.tm-list-item {
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
	border-block-end: var(--wp--custom--border--hairline);
}

.wp-block-group.tm-list-item > * {
	margin-block-start: 0;
}

.wp-block-post-featured-image.tm-list-item__media {
	flex: 0 0 168px;
	margin: 0;
}

.wp-block-post-featured-image.tm-list-item__media img {
	display: block;
	width: 100%;
	height: 112px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--small);
}

.wp-block-group.tm-list-item__body {
	flex: 1 1 auto;
}

.wp-block-post-date.tm-list-item__date {
	display: block;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 0.35rem;
}

.wp-block-post-title.tm-list-item__title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.4;
	margin: 0 0 0.4rem;
}

.wp-block-post-title.tm-list-item__title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-title.tm-list-item__title a:hover {
	color: var(--wp--preset--color--accent);
}

.wp-block-post-excerpt.tm-list-item__excerpt {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.tm-list-item__excerpt p {
	margin: 0;
}

/* --------------------------------------------------------------------------
 * 12. 侧边栏
 * ------------------------------------------------------------------------ */

.wp-block-group.tm-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	position: sticky;
	inset-block-start: 5rem;
	max-height: calc( 100vh - 6rem );
	overflow-y: auto;
	overscroll-behavior: contain;
}

.wp-block-group.tm-sidebar__block {
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: var(--wp--custom--border--hairline);
}

.wp-block-group.tm-sidebar__block:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.wp-block-heading.tm-sidebar__title {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.wp-block-latest-posts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-latest-posts li {
	margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-latest-posts a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wp-block-latest-posts a:hover {
	color: var(--wp--preset--color--accent);
}

.wp-block-latest-posts__post-date {
	display: block;
	margin-block-start: 0.15rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
 * 13. 阅读进度条
 * ------------------------------------------------------------------------ */

.tm-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	height: 2px;
	background-color: var(--wp--preset--color--accent);
	transform: scaleX( 0 );
	transform-origin: 0 50%;
	will-change: transform;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
 * 14. 文章目录
 * ------------------------------------------------------------------------ */

.tm-toc {
	background-color: var(--wp--preset--color--surface);
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.tm-toc__summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--muted);
	list-style: none;
}

.tm-toc__summary::-webkit-details-marker {
	display: none;
}

.tm-toc__summary::before {
	content: "";
	width: 0.42rem;
	height: 0.42rem;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate( -45deg );
	transition: transform var(--wp--custom--transition--fast);
}

.tm-toc__details[open] .tm-toc__summary::before {
	transform: rotate( 45deg );
}

.tm-toc__list {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tm-toc__details[open] .tm-toc__list {
	margin-block-start: var(--wp--preset--spacing--20);
}

.tm-toc__item--h3 {
	padding-inline-start: 1rem;
}

.tm-toc__link {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: color var(--wp--custom--transition--fast);
}

.tm-toc__link:hover,
.tm-toc__link.is-active {
	color: var(--wp--preset--color--accent);
}

.tm-toc__link.is-active {
	font-weight: 600;
}

/* 锚点跳转时给 sticky 页头留出空间，避免标题被压住。 */
.tm-entry :where(h2, h3, h4) {
	scroll-margin-block-start: 5.5rem;
}

/* --------------------------------------------------------------------------
 * 15. 文章页：元信息、标签、上下篇、评论
 * ------------------------------------------------------------------------ */

.wp-block-group.tm-entry-header {
	margin-block-end: var(--wp--preset--spacing--40);
}

.wp-block-post-title.tm-entry__title {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.wp-block-group.tm-meta {
	gap: 0.4rem 1rem;
	align-items: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.wp-block-group.tm-meta > * {
	margin-block-start: 0;
}

.tm-meta a {
	color: inherit;
	text-decoration: none;
}

.tm-meta a:hover {
	color: var(--wp--preset--color--accent);
}

.tm-meta__reading {
	color: inherit;
}

.wp-block-post-featured-image.tm-entry__media {
	margin-block: var(--wp--preset--spacing--40);
}

.wp-block-post-featured-image.tm-entry__media img {
	display: block;
	border-radius: var(--wp--custom--radius--medium);
}

.wp-block-group.tm-entry-footer {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wp-block-group.tm-post-nav {
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: var(--wp--custom--border--hairline);
}

.wp-block-post-navigation-link {
	max-width: 48%;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-post-navigation-link .post-navigation-link__label {
	display: block;
	color: var(--wp--preset--color--muted);
}

.wp-block-post-navigation-link .post-navigation-link__title {
	font-weight: 600;
}

.tm-post-nav__next {
	margin-inline-start: auto;
	text-align: end;
}

/* 胶囊样式：注册在 post-terms / tag-cloud / categories 上。 */
.is-style-pill a {
	display: inline-block;
	padding: 0.18em 0.6em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: color var(--wp--custom--transition--fast),
		border-color var(--wp--custom--transition--fast);
}

.is-style-pill a:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.wp-block-post-terms.is-style-pill {
	line-height: 2.1;
}

.wp-block-comments {
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-heading.tm-comments__title {
	font-size: var(--wp--preset--font-size--x-large);
}

.wp-block-group.tm-comment {
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--40);
	border-block-start: var(--wp--custom--border--hairline);
}

.wp-block-group.tm-comment > * {
	margin-block-start: 0;
}

.tm-comment__avatar img {
	border-radius: var(--wp--custom--radius--pill);
}

.wp-block-group.tm-comment__meta {
	gap: 0.25rem 0.75rem;
	align-items: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.wp-block-group.tm-comment__meta > * {
	margin-block-start: 0;
}

.tm-comment__meta a {
	color: inherit;
}

/* --------------------------------------------------------------------------
 * 16. 404
 * ------------------------------------------------------------------------ */

.wp-block-group.tm-404 {
	text-align: center;
	padding-block: var(--wp--preset--spacing--70);
}

.wp-block-heading.tm-404__code {
	font-size: clamp( 4rem, 14vw, 7rem );
	line-height: 1;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent);
	margin: 0;
}

.wp-block-heading.tm-404__title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-block-start: var(--wp--preset--spacing--30);
}

.tm-404__text {
	color: var(--wp--preset--color--muted);
}

.wp-block-search.tm-404__search {
	max-width: 30rem;
	margin-inline: auto;
	margin-block-start: var(--wp--preset--spacing--40);
}

.wp-block-group.tm-404 .wp-block-buttons {
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------------------------
 * 17. 页脚
 * ------------------------------------------------------------------------ */

.wp-block-group.tm-footer {
	margin-block-start: var(--wp--preset--spacing--70);
	border-block-start: var(--wp--custom--border--hairline);
	background-color: var(--wp--preset--color--surface);
}

.wp-block-group.tm-footer__inner {
	padding-block: var(--wp--preset--spacing--50);
}

.wp-block-group.tm-footer__top {
	gap: var(--wp--preset--spacing--40);
}

.wp-block-site-title.tm-footer__title {
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

.tm-footer__tagline {
	margin-block-start: 0.2rem;
}

.wp-block-group.tm-footer__bottom {
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--border--hairline);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.wp-block-group.tm-footer__bottom p {
	margin: 0;
}

.tm-icp a {
	color: inherit;
	text-decoration: none;
}

.tm-icp a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.tm-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
}

.tm-social a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.tm-social a:hover {
	color: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
 * 18. 响应式
 * ------------------------------------------------------------------------ */

/* 侧边栏放不下时先落回单列，再让卡片变一列。 */
@media (max-width: 1040px) {
	.wp-block-group.tm-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	.wp-block-group.tm-sidebar {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

@media (max-width: 900px) {
	/* 列数写在区块属性里会输出为内联样式，这里需要 !important 才能覆盖。 */
	.tm-post-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.wp-block-group.tm-list-item {
		flex-direction: column;
	}

	.wp-block-post-featured-image.tm-list-item__media {
		flex-basis: auto;
		width: 100%;
	}

	.wp-block-post-featured-image.tm-list-item__media img {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 782px) {
	html {
		scroll-padding-top: 4.5rem;
	}

	.tm-entry :where(h2, h3, h4) {
		scroll-margin-block-start: 4.5rem;
	}

	.wp-block-group.tm-404 {
		padding-block: var(--wp--preset--spacing--60);
	}
}

/* --------------------------------------------------------------------------
 * 19. 首页门户（顶栏 / 方向导航 / 横幅 / 方向卡片 / 项目卡片）
 * ------------------------------------------------------------------------ */

/* 19.1 顶部信息条：GitHub、邮箱、RSS */

/* 页头处于整宽出血状态，所以这一条要自己拉满，再由内层补回版心与内边距。 */
.wp-block-group.tm-header > .tm-utility {
	width: 100%;
	max-width: none;
	background-color: var(--wp--preset--color--subtle);
	border-block-end: var(--wp--custom--border--hairline);
	font-size: var(--wp--preset--font-size--small);
}

.tm-utility__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	max-width: calc( var(--wp--style--global--wide-size, 1120px) + 2 * var(--wp--style--root--padding-left, 1.5rem) );
	margin-inline: auto;
	padding-block: 0.45rem;
	padding-inline: var(--wp--style--root--padding-left, 1.5rem) var(--wp--style--root--padding-right, 1.5rem);
	color: var(--wp--preset--color--muted);
}

.tm-utility__note,
.tm-utility__links {
	margin: 0;
}

.tm-utility__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	list-style: none;
	padding: 0;
}

.tm-utility__links a {
	color: inherit;
	text-decoration: none;
	transition: color var(--wp--custom--transition--fast);
}

.tm-utility__links a:hover {
	color: var(--wp--preset--color--accent);
}

/* 19.2 门户骨架 */

.wp-block-group.tm-portal {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

/* 左侧导航列宽固定，右侧横幅吃掉剩余空间。 */
.wp-block-columns.tm-portal__top {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	margin-block-end: var(--wp--preset--spacing--60);
}

.wp-block-columns.tm-dir-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--60);
}

.wp-block-columns.tm-project-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

/* 列是网格项会拉伸，卡片跟着撑满，三张卡底部才对齐 */
.wp-block-columns.tm-project-grid > .wp-block-column > .is-style-card {
	height: 100%;
}

/* 19.3 左侧"技术方向"导航（用 details 做成可折叠面板） */

.wp-block-details.tm-rail {
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--medium);
}

.wp-block-details.tm-rail > summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.8rem var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	list-style: none;
}

.wp-block-details.tm-rail > summary::-webkit-details-marker {
	display: none;
}

/* 折叠箭头：桌面端隐藏（默认展开），手机端显示 */
.wp-block-details.tm-rail > summary::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	margin-inline-start: auto;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--wp--custom--transition--fast);
	opacity: 0;
}

.wp-block-details.tm-rail[open] > summary::after {
	transform: rotate(-135deg);
}

.wp-block-categories.is-style-rail {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-categories.is-style-rail .cat-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0;
	padding-inline-end: var(--wp--preset--spacing--30);
	border-block-end: var(--wp--custom--border--hairline);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	transition: background-color var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast);
}

.wp-block-categories.is-style-rail .cat-item:last-child {
	border-block-end: 0;
}

.wp-block-categories.is-style-rail .cat-item a {
	flex: 1 1 auto;
	padding: 0.7rem var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.wp-block-categories.is-style-rail .cat-item:hover,
.wp-block-categories.is-style-rail .current-cat {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-categories.is-style-rail .cat-item:hover a,
.wp-block-categories.is-style-rail .current-cat a {
	color: var(--wp--preset--color--base);
}

/* 19.4 渐变横幅 */

/*
 * 底色来自 theme.json 的 accent-fade 渐变预设（在区块属性里选的，编辑器里可见）。
 * 这里再写一遍相同的渐变作为兜底：万一某个环境丢了预设，也不会出现白字落在白底上。
 */
.wp-block-group.has-accent-fade-gradient-background {
	background-image: linear-gradient( 135deg, #2563eb 0%, #1d4ed8 100% );
	border-radius: var(--wp--custom--radius--large);
	overflow: hidden;
}

.wp-block-group.tm-banner {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.tm-banner__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: rgba( 255, 255, 255, 0.8 );
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
}

.wp-block-heading.tm-banner__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: #ffffff;
	font-size: var(--wp--preset--font-size--display);
	letter-spacing: -0.026em;
	line-height: 1.14;
}

.tm-banner__lead {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: rgba( 255, 255, 255, 0.88 );
	font-size: var(--wp--preset--font-size--large);
}

.tm-banner__actions {
	margin: 0;
}

.tm-banner__actions .wp-element-button {
	background-color: #ffffff;
	border-color: #ffffff;
	color: var(--wp--preset--color--accent-strong);
}

.tm-banner__actions .wp-element-button:hover {
	background-color: rgba( 255, 255, 255, 0.9 );
	border-color: rgba( 255, 255, 255, 0.9 );
	color: var(--wp--preset--color--accent-strong);
}

.tm-banner__actions .is-style-outline .wp-element-button {
	background-color: transparent;
	border-color: rgba( 255, 255, 255, 0.6 );
	color: #ffffff;
}

.tm-banner__actions .is-style-outline .wp-element-button:hover {
	background-color: rgba( 255, 255, 255, 0.14 );
	border-color: #ffffff;
	color: #ffffff;
}

/* 19.5 方向卡片 */

.wp-block-group.tm-dir {
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	text-align: center;
}

.tm-dir__icon {
	display: flex;
	justify-content: center;
	color: var(--wp--preset--color--accent);
}

.tm-dir__icon svg {
	width: 26px;
	height: 26px;
}

.wp-block-heading.tm-dir__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
}

.tm-dir__title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-group.tm-dir:hover .tm-dir__title a {
	color: var(--wp--preset--color--accent);
}

.wp-block-group.tm-dir .tm-dir__desc {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

/* 标题下方的小徽标：已更新 N 篇 / 持续更新中 */
.wp-block-group.tm-dir .tm-dir__badge {
	align-self: center;
	margin: 0;
	padding: 0.08rem 0.55rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--muted);
	font-size: 0.6875rem;
	line-height: 1.8;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* 19.6 项目卡片 */

.wp-block-group.tm-project__bar {
	background-color: var(--wp--preset--color--contrast);
	padding: 0.55rem var(--wp--preset--spacing--30);
}

.tm-project__path {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wp-block-group.tm-project__body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	flex: 1 1 auto;
	padding: var(--wp--preset--spacing--40);
}

.wp-block-group.tm-project__body > * {
	margin-block-start: 0;
}

.wp-block-heading.tm-project__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.4;
}

.tm-project__stack {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.tm-project__stack code {
	background-color: var(--wp--preset--color--subtle);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.1em 0.42em;
	font-size: 0.86em;
}

.tm-project__desc {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

/* 标题下方的一句话定位 */
.tm-project .tm-project__lead {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.6;
}

/* 卡片底部：查看源码（文字 + GitHub 图标），贴底对齐 */
.wp-block-group.tm-project__body > .tm-project__link {
	margin-block-start: auto;
	padding-block-start: 0.7rem;
	border-block-start: var(--wp--custom--border--hairline);
}

.tm-project__link a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--wp--custom--transition--fast);
}

.tm-project__link a:hover {
	color: var(--wp--preset--color--accent-strong);
	text-decoration: underline;
}

.tm-project__link svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

/* 19.7 区块标题 */

.wp-block-group.tm-section {
	margin-block-end: var(--wp--preset--spacing--60);
	scroll-margin-block-start: 5.5rem;
}

.wp-block-group.tm-section__head {
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--20);
	border-block-end: var(--wp--custom--border--hairline);
}

.wp-block-heading.tm-section__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.tm-section__more {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.tm-section__more a {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * 20. 门户页面的响应式
 * ------------------------------------------------------------------------ */

@media (max-width: 1100px) {
	.wp-block-columns.tm-dir-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1040px) {
	/* 左侧导航移到横幅上方，项目卡片两列。 */
	.wp-block-columns.tm-portal__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-columns.tm-project-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tm-portal .tm-post-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 782px) {
	.wp-block-columns.tm-dir-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-columns.tm-project-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-group.tm-banner {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	}

	.tm-utility__note {
		display: none;
	}

	.tm-portal .tm-post-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.wp-block-group.tm-section {
		scroll-margin-block-start: 4.5rem;
	}
}

/* 手机端（≤768px）：技术方向折叠成一条横条，主内容占满整行 */
@media (max-width: 768px) {
	/* 取消两列网格，主内容直接 100% 宽 */
	.wp-block-columns.tm-portal__top {
		display: block;
	}

	.wp-block-column.tm-portal__banner {
		width: 100%;
	}

	.wp-block-columns.tm-portal__top > .wp-block-column + .wp-block-column {
		margin-block-start: var(--wp--preset--spacing--30);
	}

	/* 折叠条：☰ + 技术方向 + 展开箭头 */
	.wp-block-details.tm-rail > summary {
		padding-block: 0.7rem;
	}

	.wp-block-details.tm-rail > summary::before {
		content: "☰";
		font-size: 1.05rem;
		line-height: 1;
		letter-spacing: 0;
	}

	.wp-block-details.tm-rail > summary::after {
		opacity: 1;
	}

	.wp-block-details.tm-rail[open] {
		margin-block-end: var(--wp--preset--spacing--30);
	}
}

/* --------------------------------------------------------------------------
 * 21. 内容呈现组件（代码高亮 / 复制按钮 / 终端风 / 提示框 / 标题锚点）
 * ------------------------------------------------------------------------ */

/* 21.1 代码配色：只依赖自己的变量，亮暗两套自动切换 */
:root {
	--tm-code-comment: #6b7280;
	--tm-code-keyword: #1d4ed8;
	--tm-code-string: #047857;
	--tm-code-number: #b45309;
}

html[data-theme="dark"] {
	--tm-code-comment: #7c8798;
	--tm-code-keyword: #93c5fd;
	--tm-code-string: #6ee7b7;
	--tm-code-number: #fcd34d;
}

.tm-entry .token.comment,
.tm-entry .token.prolog,
.tm-entry .token.doctype,
.tm-entry .token.cdata {
	color: var(--tm-code-comment);
	font-style: italic;
}

.tm-entry .token.punctuation,
.tm-entry .token.operator {
	color: var(--wp--preset--color--muted);
}

.tm-entry .token.keyword,
.tm-entry .token.builtin,
.tm-entry .token.function,
.tm-entry .token.class-name,
.tm-entry .token.rule,
.tm-entry .token.atrule {
	color: var(--tm-code-keyword);
}

.tm-entry .token.string,
.tm-entry .token.attr-value,
.tm-entry .token.regex,
.tm-entry .token.inserted {
	color: var(--tm-code-string);
}

.tm-entry .token.number,
.tm-entry .token.boolean,
.tm-entry .token.constant,
.tm-entry .token.symbol {
	color: var(--tm-code-number);
}

.tm-entry .token.property,
.tm-entry .token.tag,
.tm-entry .token.selector,
.tm-entry .token.attr-name,
.tm-entry .token.variable,
.tm-entry .token.deleted {
	color: var(--wp--preset--color--accent-strong);
}

.tm-entry .token.bold,
.tm-entry .token.important {
	font-weight: 600;
}

/* 21.2 代码块外壳与"复制"按钮 */
.tm-code-wrap {
	position: relative;
}

.tm-copy {
	position: absolute;
	inset-block-start: 0.45rem;
	inset-inline-end: 0.45rem;
	z-index: 1;
	padding: 0.18rem 0.6rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.75rem;
	line-height: 1.6;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast),
		border-color var(--wp--custom--transition--fast);
}

.tm-code-wrap:hover .tm-copy,
.tm-copy:focus-visible {
	opacity: 1;
}

.tm-copy:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.tm-copy.is-done {
	opacity: 1;
	color: var(--tm-code-string);
	border-color: var(--tm-code-string);
}

/* 触摸设备没有 hover，按钮常显。 */
@media (hover: none) {
	.tm-copy {
		opacity: 1;
	}
}

/* 21.3 终端风代码块（区块样式 is-style-terminal） */
.wp-block-code.is-style-terminal {
	background-color: #0f1419;
	border-color: #29323f;
	color: #e6eaf0;
}

.wp-block-code.is-style-terminal::before {
	content: "";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	margin-block-end: 0.85rem;
	border-radius: 50%;
	background-color: #f87171;
	box-shadow: 1.05rem 0 0 #fbbf24, 2.1rem 0 0 #34d399;
}

.wp-block-code.is-style-terminal code {
	color: inherit;
}

/* 终端块底色固定是深色，token 颜色单独给一套，别跟着亮色主题走。 */
.wp-block-code.is-style-terminal .token.comment {
	color: #94a3b8;
}

.wp-block-code.is-style-terminal .token.punctuation,
.wp-block-code.is-style-terminal .token.operator {
	color: #94a3b8;
}

.wp-block-code.is-style-terminal .token.keyword {
	color: #93c5fd;
}

.wp-block-code.is-style-terminal .token.string {
	color: #6ee7b7;
}

.wp-block-code.is-style-terminal .token.number {
	color: #fcd34d;
}

.wp-block-code.is-style-terminal .token.property,
.wp-block-code.is-style-terminal .token.tag,
.wp-block-code.is-style-terminal .token.attr-name,
.wp-block-code.is-style-terminal .token.variable {
	color: #fdba74;
}

/* 21.4 提示框（区块样式 is-style-tip / is-style-warning / is-style-danger） */
.wp-block-group.is-style-tip,
.wp-block-group.is-style-warning,
.wp-block-group.is-style-danger {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	border-inline-end: 0;
	border-block: 0;
	border-start-start-radius: 0;
	border-start-end-radius: var(--wp--custom--radius--small);
	border-end-start-radius: 0;
	border-end-end-radius: var(--wp--custom--radius--small);
	background-color: rgba( 37, 99, 235, 0.07 );
}

.wp-block-group.is-style-warning {
	border-inline-start-color: #d97706;
	background-color: rgba( 217, 119, 6, 0.09 );
}

.wp-block-group.is-style-danger {
	border-inline-start-color: #dc2626;
	background-color: rgba( 220, 38, 38, 0.09 );
}

.wp-block-group.is-style-tip > *,
.wp-block-group.is-style-warning > *,
.wp-block-group.is-style-danger > * {
	margin-block-start: 0;
}

/* 21.5 标题锚点（悬停显形，方便复制"某一节"的地址） */
.tm-anchor {
	margin-inline-start: 0.35em;
	color: var(--wp--preset--color--border);
	font-weight: 400;
	text-decoration: none;
	opacity: 0;
	transition: opacity var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast);
}

.tm-entry :where(h2, h3, h4):hover .tm-anchor,
.tm-anchor:focus-visible {
	opacity: 1;
}

.tm-anchor:hover {
	color: var(--wp--preset--color--accent);
}

/* 21.6 斑马纹表格（复用核心自带的 is-style-stripes） */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--subtle);
	background-color: color-mix( in srgb, var(--wp--preset--color--subtle) 72%, transparent );
}

.wp-block-table.is-style-stripes :where(th, td) {
	border-color: transparent;
}

.wp-block-table.is-style-stripes thead th {
	border-block-end: 2px solid var(--wp--preset--color--border);
}

/* --------------------------------------------------------------------------
 * 22. 页面模板 / 导航里的简历按钮
 * ------------------------------------------------------------------------ */

.wp-block-group.tm-page-head {
	margin-block-end: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: var(--wp--custom--border--hairline);
}

/* 页面模板是 760px 窄版心，项目卡片三列会挤，改成单列 */
.wp-block-group.tm-main .tm-project-grid {
	grid-template-columns: minmax(0, 1fr);
}

/* 关于页：开场与技能条 */
.tm-about__lead {
	margin-block-start: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.95;
}

.tm-about__meta {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
}

.tm-skills {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-block: 1.25rem 2rem;
}

.tm-skill {
	display: grid;
	grid-template-columns: 22px 5rem minmax(0, 1fr) 3rem;
	align-items: center;
	gap: 0.8rem;
}

.tm-skill svg {
	width: 18px;
	height: 18px;
	color: var(--wp--preset--color--accent);
}

.tm-skill__name {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.tm-skill__track {
	display: block;
	height: 6px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--subtle);
	overflow: hidden;
}

.tm-skill__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background-image: linear-gradient(
		90deg,
		var(--wp--preset--color--accent),
		var(--wp--preset--color--accent-strong)
	);
}

.tm-skill__level {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	text-align: end;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.tm-skill {
		grid-template-columns: 20px 4.2rem minmax(0, 1fr) 2.6rem;
		gap: 0.5rem;
	}
}

/* --------------------------------------------------------------------------
 * 24. 项目展示卡片：悬停上浮 + 淡蓝色光晕
 * ------------------------------------------------------------------------ */

.wp-block-group.tm-project {
	will-change: transform;
	transition: transform 220ms ease,
		box-shadow 220ms ease,
		border-color 220ms ease;
}

.wp-block-group.tm-project:hover {
	transform: translateY(-5px);
	border-color: color-mix( in srgb, var(--wp--preset--color--accent) 34%, var(--wp--preset--color--border) );
	box-shadow:
		0 1px 2px rgba( 37, 99, 235, 0.10 ),
		0 10px 24px -8px rgba( 37, 99, 235, 0.22 ),
		0 22px 44px -22px rgba( 37, 99, 235, 0.28 );
}

/* 暗色下底更深，光晕稍微提亮一点，避免糊成一团 */
html[data-theme="dark"] .wp-block-group.tm-project:hover {
	border-color: color-mix( in srgb, var(--wp--preset--color--accent) 40%, var(--wp--preset--color--border) );
	box-shadow:
		0 1px 2px rgba( 96, 165, 250, 0.12 ),
		0 10px 26px -8px rgba( 96, 165, 250, 0.24 ),
		0 24px 48px -22px rgba( 96, 165, 250, 0.26 );
}

/* 键盘聚焦时给同样的视觉反馈，顺便保证可访问性 */
.wp-block-group.tm-project:focus-within {
	border-color: var(--wp--preset--color--accent);
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-group.tm-project,
	.wp-block-group.tm-project:hover {
		transform: none;
		transition: box-shadow 120ms ease, border-color 120ms ease;
	}
}

.tm-resume-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.8rem;
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--accent);
	color: #ffffff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--fast),
		transform var(--wp--custom--transition--fast);
}

.tm-resume-btn:hover,
.tm-resume-btn:focus-visible {
	background-color: var(--wp--preset--color--accent-strong);
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-1px);
}

.tm-resume-btn svg {
	flex: none;
}

@media (max-width: 782px) {
	.tm-resume-btn {
		padding: 0.4rem 0.6rem;
	}
}

/* 打印时把交互元素收起来，正文回到纯白纸面。 */
@media print {
	.tm-progress,
	.tm-toc,
	.tm-skip-link,
	.tm-icon-btn,
	.tm-social,
	.wp-block-comments {
		display: none;
	}

	body {
		background: #ffffff;
		color: #000000;
	}

	.wp-block-group.is-style-card {
		border-color: #dddddd;
		box-shadow: none;
	}
}