/* ==========================================================================
grid-backdrop.css · 工业工程图纸方格坐标网格（全站大背景底板）
--------------------------------------------------------------------------
加载顺序：**必须放在整条样式链的最末**（模板 head 里 已排在
flat-industrial-clean.css 之后）。本层要压过四处已有的
`!important` 底色声明，靠"同权重 + 靠后加载"取胜：
win2000.css:206 html { background-color: var(--desktop) !important }
win2000.css:225 body.w2k#top{ background: var(--desktop) !important;
background-image: none !important }
win2000.css:5014 .w2k-dialog-overlay { background: var(--desktop) }
flat-industrial.css:749 .w2k-desktop{ background-color: var(--flat-desktop) !important }
因此本节所有选择器都写成 `html:not(.dark)` / `html.dark` 两态、
并统一带 !important —— 顺序可以照旧，权重不必再猜。
回退：删掉模板里那一行
即可完全恢复纯色桌面底，零残留、无需改 Go 与 JS。
设计约束（与需求规范一一对应）：
1. 纯 CSS `linear-gradient`，零外部切图、零 base64、零字体图标。
2. 方格边长固定 20px × 20px（--grid-size，只改这一个值即可整体缩放）。
3. 明色：基色 #FAF9F6，线 rgba(0,0,0,.06)。
4. 暗色：基色 #1A1A1A，线 rgba(255,255,255,.05)。
5. 网格**只**落在最外层底板（html / body / .w2k-desktop）上；
窗口内凹容器一律被 |GRID GUARD| 一节按结构推导钉成实心，永不透底。
========================================================================== */
/* ==========================================================================
1. 色令牌：网格总闸
--------------------------------------------------------------------------
改风格只需动这四个变量。注意它们是**字面值**、不是 var() 转发：
底板必须是不透明实色，否则窗口的 1px 圆角缝隙会透出下面 html 的底色。
========================================================================== */
:root {
--grid-size: 20px; /* 方格边长（需求：固定 20px） */
--grid-line-w: 1px; /* 线宽（需求：1px 锐利） */
--grid-base: #FAF9F6; /* 亮色底板：复古暖白 / 系统纸张底 */
--grid-line: rgba(0, 0, 0, .06); /* 亮色网格线：极淡中性灰 */
/* 两股 1px 线的叠加图形。background-position 已做半像素补偿：
线画在 tile 的 0~1px 上，tile 尺寸恰为 20px，无接缝、无半像素发虚。 */
--grid-image:
linear-gradient(to right, var(--grid-line) 0 var(--grid-line-w), transparent var(--grid-line-w)),
linear-gradient(to bottom, var(--grid-line) 0 var(--grid-line-w), transparent var(--grid-line-w));
}
/* 暗黑模式：同时覆盖 .dark 与 [data-theme="dark"] 两种约定 */
html.dark,
html[data-theme="dark"] {
--grid-base: #1A1A1A; /* 暗色底板：中性炭黑 */
--grid-line: rgba(255, 255, 255, .05);/* 暗色网格线：微透白线 */
}
/* ==========================================================================
2. 底板铺网格（唯一渲染网格的地方）
--------------------------------------------------------------------------
分两步，避免把 fixed 背景挂在可能零高度的 html 盒子上（部分引擎对
root 元素的非传播背景 + fixed 附件裁切不可预期）：
2.1 底色：钉在 html 上 —— 它就是画布传播底，任何缝隙都只会露出它；
2.2 网格：钉在 body 与 .w2k-desktop 上 —— 两者都是"满屏且带内边距"的
实际盒子，fixed 附件下 tile 原点统一锁在视口 (0,0)，
因此滚动时网格不跟随内容，三层之间也不会错位。
视窗外边缘（窗口四周那圈 18px 桌面留白）随之显形。
========================================================================== */
/* ---------- 2.1 底板基色（最底层兜底，永不参与网格平铺） ---------- */
html:not(.dark),
html.dark {
background-color: var(--grid-base) !important;
}
/* ---------- 2.2 网格图形（body + 桌面容器，视口对齐） ---------- */
html:not(.dark) body.w2k#top,
html.dark body.w2k#top,
html:not(.dark) body.w2k#top :is(.w2k-desktop, #desktop-container),
html.dark body.w2k#top :is(.w2k-desktop, #desktop-container) {
background-color: var(--grid-base) !important;
background-image: var(--grid-image) !important;
background-repeat: repeat !important;
background-size: var(--grid-size) var(--grid-size) !important;
background-position: 0 0 !important;
background-attachment: fixed !important;
}
/* ==========================================================================
3. 可复用工具类（Tailwind 布局页 / 局部容器想用网格时按需挂上）
--------------------------------------------------------------------------
全站底板之外，如果想在别处复用同一套网格，只需给元素加 class="grid-backdrop"：
· .grid-backdrop 铺满网格（底色 + 20px 方格）—— 需要元素自身可见
· .grid-backdrop-fixed 同上，但网格锁定视口（滚动不跟随内容）
· .grid-backdrop-none 在本层显式关掉继承来的网格（内层保护手动兜底用）
注意 `.grid-backdrop` 与第 4 节的 |GRID GUARD| 互不打架：
GUARD 用的是 :not(.grid-backdrop)，永远不会把本工具类铺上去的网格二次抹掉。
========================================================================== */
.grid-backdrop,
.grid-backdrop-fixed {
background-color: var(--grid-base);
background-image: var(--grid-image);
background-repeat: repeat;
background-size: var(--grid-size) var(--grid-size);
background-position: 0 0;
}
.grid-backdrop-fixed { background-attachment: fixed; }
.grid-backdrop-none {
background-image: none;
}
/* ==========================================================================
4. |GRID GUARD| 视窗内层保护：内凹容器 / 卡片 / 正文页一律实心，绝不透底
--------------------------------------------------------------------------
本项目的内层实心底**已经存在**于 flat-industrial-clean.css 第 2 节
（`.win-inset` / `.prose-paper` / `.w2k-main` / `.w2k-sidebar` / `.w2k-pane`
→ #faf9f6 / #1e1e1e，正文卡 #ffffff）。本节不重复造底，
只做三件事：
(a) 兜底：万一某处内层底被后续改动删掉，这里按结构把网格盖回去；
(b) 把"文字会与网格交叉"的高危类显式钉死（.win-inset / .prose-paper /
.reading-content），并禁止它们蹭到底板的网格图；
(c) 把那层"挡住了网格"的全屏遮罩改成透明（404 对话框叠加层）。
—— 全部用 background-color / background-image 分写（不使用 background 简写），
避免顺手把别人的渐变或图片冲掉；
—— 全部带 :not(.grid-backdrop)，所以第 3 节那个工具类想用时不会被本层抹掉。
========================================================================== */
html:not(.dark) body.w2k#top
:is(.win-inset, .win-sunken, .w2k-sunken, .prose-paper, .reading-content,
#article-content, .w2k-main, .w2k-sidebar, .w2k-pane, .w2k-pane-body,
.w2k-client, .w2k-window, .w2k-card, .code-block-wrapper, pre.code-body,
.table-scroll, .table-container-inset, .paper-audio-player, .paper-audio-playlist,
.filter-popover, .w2k-dialog):not(.grid-backdrop),
html.dark body.w2k#top
:is(.win-inset, .win-sunken, .w2k-sunken, .prose-paper, .reading-content,
#article-content, .w2k-main, .w2k-sidebar, .w2k-pane, .w2k-pane-body,
.w2k-client, .w2k-window, .w2k-card, .code-block-wrapper, pre.code-body,
.table-scroll, .table-container-inset, .paper-audio-player, .paper-audio-playlist,
.filter-popover, .w2k-dialog):not(.grid-backdrop) {
background-image: none !important;
}
/* 工作区 / 侧栏 / 内凹视窗 / 窗体外壳：实心底（与 clean 层同值，权重更高，
只在 clean 层被破坏时才真正出力） */
html:not(.dark) body.w2k#top#top
:is(.win-inset, .win-sunken, .w2k-sunken, .w2k-main, .w2k-sidebar, .w2k-pane,
.w2k-pane-body, .w2k-client, .w2k-window, .w2k-card, .table-scroll,
.table-container-inset, .code-block-wrapper, .paper-audio-player,
.paper-audio-playlist, .filter-popover, .w2k-dialog):not(.grid-backdrop) {
background-color: #FAF9F6 !important;
}
html.dark body.w2k#top#top
:is(.win-inset, .win-sunken, .w2k-sunken, .w2k-main, .w2k-sidebar, .w2k-pane,
.w2k-pane-body, .w2k-client, .w2k-window, .w2k-card, .table-scroll,
.table-container-inset, .code-block-wrapper, .paper-audio-player,
.paper-audio-playlist, .filter-popover, .w2k-dialog):not(.grid-backdrop) {
background-color: #1E1E1E !important;
}
/* 正文阅读卡：比工作区再亮/再暗一档，保证长文可读性最优（不透底、不渲网格） */
html:not(.dark) body.w2k#top#top :is(.prose-paper, .reading-content, #article-content) {
background-color: #FFFFFF !important;
background-image: none !important;
}
html.dark body.w2k#top#top :is(.prose-paper, .reading-content, #article-content) {
background-color: #181818 !important;
background-image: none !important;
}
/* --------------------------------------------------------------------------
4.1 全屏遮罩透明化
win2000.css:5014 给 404 的 .w2k-dialog-overlay 铺了 `background: var(--desktop)`
—— 那是一整块不透明桌面色，正好把刚铺好的网格整块盖掉（404 页只有
.w2k-dialog-overlay 而无 .w2k-desktop，所以第 2 节管不到它）。
改成 transparent：桌面底色仍由 html 层兜着（第 2 节），因此
"先铺色、后铺网格"的次序不变，404 页也能看到同一张网格。
灯箱 .w2k-lightbox 是 rgba(0,0,0,.45) 半透明遮罩，网格理应透出来，不动它。 */
html:not(.dark) body.w2k#top .w2k-dialog-overlay,
html.dark body.w2k#top .w2k-dialog-overlay {
background: transparent !important;
}
/* ==========================================================================
5. 降级与性能
========================================================================== */
/* 高对比度 / 强制颜色模式：网格线属于纯装饰，此时交给系统色，避免糊成一片 */
@media (forced-colors: active) {
html:not(.dark) body.w2k#top,
html.dark body.w2k#top,
html:not(.dark) body.w2k#top :is(.w2k-desktop, #desktop-container),
html.dark body.w2k#top :is(.w2k-desktop, #desktop-container) {
background-image: none !important;
}
}
/* 移动端：background-attachment: fixed 在 iOS 上会退化成整屏重绘，
触屏一律改回 scroll（tile 原点仍在元素左上，视觉差异仅在滚动跟随）。
同时把窗口四周的桌面留白收窄，网格只保留在窗口下方那一圈。 */
@media (max-width: 767px) {
html:not(.dark) body.w2k#top,
html.dark body.w2k#top,
html:not(.dark) body.w2k#top :is(.w2k-desktop, #desktop-container),
html.dark body.w2k#top :is(.w2k-desktop, #desktop-container) {
background-attachment: scroll !important;
}
}
/* 打印：网格属于屏幕装饰，纸面一律纯净白底 */
@media print {
html,
body.w2k#top,
body.w2k#top :is(.w2k-desktop, #desktop-container) {
background-color: #FFFFFF !important;
background-image: none !important;
}
}
/* 尊重"减少动态效果"的同时也减少大面积重绘：关闭视口粘附 */
@media (prefers-reduced-motion: reduce) {
html:not(.dark) body.w2k#top,
html.dark body.w2k#top,
html:not(.dark) body.w2k#top :is(.w2k-desktop, #desktop-container),
html.dark body.w2k#top :is(.w2k-desktop, #desktop-container) {
background-attachment: scroll !important;
}
}