/* theme.css — 两站的最后一层（10-26 起，质感版）。在各站所有样式之后加载（shared_ui/build.py 的 theme()，官网 layout 的 {{ui:theme}}）。
 * 由像素风 pixel.css（现存 site/drafts/retired/pixel/）里要留下的部分改来，像素的写法都去掉了：
 *   - 页脚、墨色通栏的底色；
 *   - 夜里给各页写死浅色的组件补色（10-24 三站逐页查出来的清单）、配方现场演示整块照昼色；
 *   - 印章：昼里不叠底，夜里提亮一档；
 *   - 页脚的昼夜按钮（theme.js 放进去）和切昼夜时的整页淡入。
 * 颜色一律用 ui.css 第 1 段的变量；昼夜两套色板本身在 ui.css。 */

/* ---------- 页脚、墨色通栏的底色 ---------- */
:root[data-theme="dark"] .site-foot { background: #0b0e15; }   /* 夜里页脚比页面底再深一档（P） */
.band-ink { background-color: var(--night); }                    /* 墨色通栏不管昼夜都照夜（色板见 ui.css 的 .band-ink） */

/* ---------- 各页自己写死浅色的地方：夜里换深 ----------
 * 这些组件的字走 --ink 一类变量（夜里变浅），底却写死了白或米白，夜里就成了浅底浅字。按 10-24 三站逐页查出来的清单改：
 * 底子换成窗口、卡片那几档深色；组件自己有变量的（.pcs、.api-con）就换变量。昼里一律照原样。 */
:root[data-theme="dark"] .api-con .api-status { background: var(--paper-2) !important; border-color: var(--line) !important; }
:root[data-theme="dark"] .article-body thead th { background: var(--wash) !important; color: var(--muted) !important; }
:root[data-theme="dark"] :is(.article-prose blockquote, .about-self, .skill-fields > div, .assess-dock, .page-kicker.layer-kicker, .layer-next-line, .player,
  .article-prose .article-note, .skill-table, .hub-fig .hub, .plat-price .plat-also) {
  background: var(--sheet) !important; border-color: var(--line-2) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
:root[data-theme="dark"] .api-con { --api-tint: rgb(238 232 220 / 0.03); --api-code: rgb(0 0 0 / 0.25); }
:root[data-theme="dark"] .pcs {
  --pcs-ink: #eee8dc; --pcs-ink2: #e2dbcd; --pcs-soft: #c2bbad; --pcs-muted: #8e96a7;
  --pcs-line: rgb(238 232 220 / 0.12); --pcs-line2: rgb(238 232 220 / 0.26); --pcs-fill: rgb(238 232 220 / 0.14); --pcs-bar: #e2dbcd;
  --pcs-side-bg: #141b29; --pcs-main-bg: #182031; --pcs-card: #1d2638; --pcs-hi: rgb(238 232 220 / 0.07);
  --pcs-mask: rgb(238 232 220 / 0.4); --pcs-on: #263046; --pcs-stop: #e05a43;
  --pcs-tabs-bg: rgb(238 232 220 / 0.05); --pcs-tab-on: rgb(238 232 220 / 0.12); --pcs-text-h: #eee8dc; --pcs-text-p: #c2bbad;
}
/* 配方的现场演示（卡片封面 .lv-tile、详情页 .pd-live）是一块块「屏幕」，里面写死的颜色多，整块照昼的颜色显示；.pd-poem：节气海报配方里压在浅色海报上的诗句 */
:root[data-theme="dark"] :is(.lv-tile, .pd-live .lv-fit, .pd-poem) {
  --paper: #f6f4ef; --paper-2: #edeae2; --paper-tint: #e4e0d5; --sheet: #fcfbf8; --sheet-hi: #ffffff;   /* 昼的纸色（10-27 换 C 素白，同 ui.css 第 1 段） */
  --ink: #12161f; --ink-2: #1c212d; --ink-soft: #3c4250; --muted: #5e626c;
  --line: rgb(18 22 31 / 0.16); --line-2: rgb(18 22 31 / 0.3); --line-3: rgb(18 22 31 / 0.5);
  --accent: #b63a2b; --accent-text: #a8342a; --accent-text-sm: #a8342a; --cinnabar: #b63a2b; --cinnabar-text: #a8342a;
  --ink-rgb: 18 22 31; --paper-rgb: 246 244 239; --accent-rgb: 182 58 43; --shadow-rgb: 30 29 26;
  color: var(--ink-2);
}

/* ---------- 印章：原版朱印（fyro-ui/seal.png 印面里的镂空补成了米白，昼夜都不垫底板） ----------
 * 昼里不叠底：页面里只要有一处 mix-blend-mode，Chrome 系浏览器里页头的毛玻璃就不模糊（10-26 样稿里查出来的），各页写的 multiply 在这里一并去掉。
 * 夜里朱色提亮一档，压得住深底（10-25 Leon「logo改回原版但是适配 昼夜 情况」） */
img[src*="seal"] { mix-blend-mode: var(--seal-blend) !important; }
:root[data-theme="dark"] img[src*="seal"] { filter: var(--seal-filter); }

/* ---------- 页脚的昼夜按钮（theme.js 放进去；样子同样稿的图标按钮） ----------
 * 10-24 Leon「黑白开关放到更合适的位置，现在太突兀了」→ 收进页脚最后一行（公司、备案号那行）；「改成常规的太阳月亮那种按钮」→
 * 昼里是月亮（点了换深色），夜里是太阳。两个图标都在按钮里，CSS 按昼夜只显示一个。驭火LAB 挨着「回到顶部」靠右，火力坊在那一行最右；手机上随那一行顺下来。 */
.theme-btn { width: 32px; height: 32px; margin: -7px -6px -7px auto; color: var(--muted); }
.theme-btn .i { width: 18px; height: 18px; }
.theme-btn + .back-top { margin-left: 0 !important; }
.theme-btn .i-sun, :root[data-theme="dark"] .theme-btn .i-moon { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
@media (max-width: 639px) { .site-foot .theme-btn { margin-left: -8px; align-self: flex-start; } }
@media print { .theme-btn { display: none; } }

/* ---------- 切昼夜：整页淡入淡出（View Transitions，theme.js 只在这一次给 html 加 .theme-vt）；不支持的浏览器直接换 ---------- */
:root.theme-vt::view-transition-old(root), :root.theme-vt::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }