/* ============================================================
   woq-next.css — 浅色工作层（Apple 风）覆盖层
   仅对带 body.theme-light 的「工作页」生效（MSA / 七大工具等）；
   导航页（index 等深色壳层页）不引入本文件，沿用 components.css 深色外壳。
   页脚「结构」已并入 components.css（全站统一，由 site.js renderFooter 生成），
   本文件只负责把工作页的壳层（顶栏 / 页脚 / 首屏 / 侧栏）翻成浅色。
   加载顺序在 components.css / site.css / subject.css 之后，以同特异性覆盖。
   ============================================================ */

/* 工作页顶栏紧凑化（仅浅色页） */
body.theme-light { --topbar-h: 52px; }

/* CR-2026-072g：body 底色必须随范式。
   site.css 给 body 写的是深色径向渐变（radial-gradient(...#15263c ...) + --bg），
   浅色页一旦在 .work 之外还有 body 直属内容（说明段、横幅等），就会露出深色底 → 视觉上是一条「黑条」。
   这里用同特异性覆盖，并顺带清掉深色 background-image（background 简写会重置 image）。 */
body.theme-light {
  background: var(--work-bg);
}

/* ---------- 顶栏：浅色、无横线、紧凑 ---------- */
body.theme-light .topbar {
  background: var(--work-bg);
  border-bottom: 0;
  box-shadow: none;
}
body.theme-light .topbar.scrolled { border-bottom-color: transparent; box-shadow: none; }

/* ---------- P1 ④ 修订：范式过渡「品牌带」→「无感 + 滚动出线」 ----------
   2026-10-18 用户评审定稿（原「常驻 2px 青→蓝渐变带」方案废弃，曾以
   body[data-p1="pilot"] 门控试点，已删除）：
   静止态顶栏与正文无感一体（保留 Apple 式无分割设计）；仅滚动态浮现 1px 品牌色
   细线界定顶栏下沿 —— 长参考页正文会穿过不透明同色顶栏，完全无界线时正文与导航
   糊在一起（可用性缺陷）。这也正是 Apple 官网的真实机制：静止无感、滚动才出线。
   废弃常驻渐变的理由：① 每页顶部一条高饱和装饰线与章节 chip/色条叠加，品牌 accent
   超配；② 渐变右端蓝 #2f81f7 不在浅色页 palette（青系）内，属 palette 泄漏；
   ③ 界定作用 1px 已足够，2px 渐变属超额配置。
   实现：::after 常驻但 opacity:0，.topbar.scrolled 时 opacity:1（.18s 淡入）；
   .scrolled 钩子由 site.js 提供（scrollY>8 切换 class），零 JS 改动。
   ⚠ 必须用 ::after 承载：单边 border-image 渐变写法在 Edge/Chromium 实测不可靠。
   ⚠ .topbar 是 position:sticky（components.css）→ 是 ::after 的包含块，无需 position:relative。
   颜色走 var(--brand)（浅色页双轨自动解析为 #0e7490，遵循 P0 双轨纪律）。
   壳层行为：不设 data-p1 门控，全站浅色页一致生效；深色首页顶栏在 theme-light 之外，
   保持自有「1px shell 线 + 滚动 shadow」，不受本规则影响。 */
body.theme-light .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--brand); opacity: 0; transition: opacity .18s ease;
  pointer-events: none; z-index: 1; }
body.theme-light .topbar.scrolled::after { opacity: 1; }
body.theme-light .topbar .navlink {
  color: var(--work-txt);
  font-size: 13.5px;
  font-weight: 600;
}
/* ⚠ 2026-10-17（CR-2026-118d）：这里曾有一条 `body.theme-light .topbar .navitem::after{display:none}`，
   **已删除**。该 ::after 不是悬停下划线，而是「入口 → 面板」之间 8px 空隙的命中桥（hover bridge）。
   删掉它之后浅色页实测：垂直下移 10 步里 6 步断链、斜向 11 步里 10 步断链 —— 用户观感是
   「鼠标稍微一动下拉栏就消失，得迅速怼到某个卡片上才稳住」。
   浅色页要去的是**下划线**（.navlink::after，见下条 width:0），桥必须保留。 */
body.theme-light .topbar .navitem:hover .navlink,
body.theme-light .topbar .navitem:focus-within .navlink,
body.theme-light .topbar .navitem.is-open .navlink { color: var(--work-txt); background: var(--brand-soft); }
body.theme-light .topbar .navitem:hover .navlink::after,
body.theme-light .topbar .navitem:focus-within .navlink::after,
body.theme-light .topbar .navitem.is-open .navlink::after { width: 0; }
body.theme-light .topbar .navitem.is-active > .navlink { color: var(--brand-ink); }
body.theme-light .topbar .navitem.is-active > .navlink::after { width: 0; }

/* ---------- 下拉帘幕：浅色（Apple 式） ---------- */
body.theme-light .topbar .navpanel {
  background: var(--work-panel);
  border: 1px solid var(--work-line);
  box-shadow: var(--shadow-work);
}
body.theme-light .topbar .navpanel-title { color: var(--brand-ink); border-bottom-color: var(--work-line); }
body.theme-light .topbar .navcard { background: var(--work-panel); border-color: var(--work-line); }
body.theme-light .topbar .navcard:hover { border-color: var(--brand); background: var(--brand-soft); }
body.theme-light .topbar .navcard-name { color: var(--work-txt); }
body.theme-light .topbar .navcard-desc { color: var(--work-muted); }
body.theme-light .topbar .navcard.soon { opacity: 1; }
body.theme-light .topbar .navcard.soon:hover { background: var(--work-panel2); border-color: var(--work-line); }
body.theme-light .topbar .soon-badge { color: var(--brand-ink); background: var(--brand-soft); border-color: var(--brand-ink); }

/* 语言切换 + 登录/注册按钮 对齐浅色栏 */
body.theme-light .lang-switch { color: var(--work-txt); border-color: var(--work-line2); }
/* CR-2026-142：浅色顶栏面包屑 —— --shell-muted(#9AA4B2) 在白底对比仅约 2.5:1，改用 --work-muted */
body.theme-light .topbar .crumb { color: var(--work-muted); }
body.theme-light .topbar .auth .btn-ghost { color: var(--work-txt); border-color: var(--work-line2); }

/* ---------- 品牌 logo：标记 + QualEngine = 品牌青，质擎 = 可读深色 ---------- */
body.theme-light .topbar .brand { color: var(--work-txt); }
body.theme-light .topbar .brand-zh { color: var(--work-txt); }
body.theme-light .topbar .brand-en { color: var(--brand); }

/* ---------- 侧栏：去竖线，保留 1:1 形态（浅底与浅底页脚自然融合） ----------
   ⚠ 2026-10-17：`animation:none` 必须保留。分页模式下页脚常在首屏下方仅 ~900px，
   若恢复 subject.css 的「滚到页脚淡出」，滚动 200~300px 侧栏就整条消失，等于没有侧栏。
   页脚被侧栏硬盖的问题改由下方「页脚让开侧栏」规则解决。 */
body.theme-light #rail::before { display: none !important; }
body.theme-light #rail { animation: none !important; }

/* ---------- 页脚让开固定侧栏 ----------
   #rail 是 position:fixed 贴左全高，页脚却是满幅居中 .wrap → 左列被压：
   实测「Quality ToolKit…」被切成「…it」、「© 2026 PanShu / 潘书」被切成「u / 潘书」。
   侧栏不透明（浅底与页脚同色，不会透视），只能让页脚内容主动右移一个栏宽。 */
body.theme-light:has(#rail) .footer .wrap { padding-left: calc(58px + var(--space-4)); transition: padding-left .25s ease; }
body.theme-light:has(#rail).rail-hover .footer .wrap,
body.theme-light:has(#rail).rail-pinned .footer .wrap { padding-left: calc(236px + var(--space-4)); }
@media (max-width: 1000px) {
  body.theme-light:has(#rail) .footer .wrap,
  body.theme-light:has(#rail).rail-hover .footer .wrap,
  body.theme-light:has(#rail).rail-pinned .footer .wrap { padding-left: var(--space-4); }
}

/* ---------- 页脚：翻成浅色（结构见 components.css） ---------- */
body.theme-light .footer {
  background: var(--work-bg);
  border-top: 1px solid var(--work-line);
  color: var(--work-txt);
}
body.theme-light .f-logo .brand-zh { color: var(--work-txt); }
body.theme-light .f-logo .brand-en { color: var(--brand); }
body.theme-light .f-tag { color: var(--work-muted); }
body.theme-light .f-dir h4 { color: var(--work-txt); }
body.theme-light .f-dir a { color: var(--work-muted); }
body.theme-light .f-dir a:hover { color: var(--brand-ink); }
body.theme-light .footer-legal { border-top: 1px solid var(--work-line); }
body.theme-light .f-legal { color: var(--work-dim); }
body.theme-light .f-legal .dot { color: var(--work-line2); }

/* ---------- 首屏 Hero：浅色无缝（工作页如有 hero 时） ---------- */
body.theme-light .h-hero.band-dark { background: var(--work-bg); color: var(--work-txt); }
body.theme-light .h-hero .h-eyebrow { color: var(--brand-ink); }
body.theme-light .h-hero h1 { color: var(--work-txt); }
body.theme-light .h-hero h1 .em { color: var(--brand-ink); }
body.theme-light .h-hero .lead { color: var(--work-muted); }
body.theme-light .h-hero .lead strong { color: var(--work-txt); }
body.theme-light .h-hero .h-cta .btn-ghost { color: var(--work-txt); border-color: var(--work-line2); background: transparent; }
body.theme-light .h-hero .h-cta .btn-ghost:hover { border-color: var(--brand); color: var(--brand-ink); }
body.theme-light .h-hero .h-stats div b { color: var(--brand-ink); }
body.theme-light .h-hero .h-stats div .k { color: var(--work-muted); }