/* website/pages/assets/css/style.css — 全站视觉系统（token + 组件）。
   页面任务只能用下方 class + 语义标签（关键 class 清单见 plan Task 3 Step 1）。

   ⚠️ 字体 @font-face **不在这里** import。字体子集按语言分份
   （fonts-zh-Hans.css / fonts-zh-Hant.css / fonts-en.css），由 build.mjs 在每页
   <head> 里按路径注入对应那一份。
   曾用 `@import url('/assets/fonts/fonts.css')` 走全站合并的一份，但三语字符并集
   951 字让 css2 的 text= 编码后约 8.5KB、超出 Google 接受长度被**静默忽略**，
   退回 unicode-range 切片整包 → 简中首屏 303KB 涨到 1476KB、繁中 3804KB。
   拆语言后每份只剩本语言的字，length 回到安全区。详见 build.mjs collectChars 注释。 */

:root {
  --bg: #232B3D; --panel: #2B3450; --glass: rgba(43, 52, 80, .72);
  --lamp: #E8B84B; --ink: #EFEAE0; --ink-dim: #A8AFC4; --tech: #7FA8C9;
  --serif: 'Noto Serif SC', serif; --sans: 'Noto Sans SC', 'Inter', sans-serif; --mono: 'JetBrains Mono', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.75 var(--sans) }
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px }
a { color: var(--tech) }
a:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px }
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600 }
img { max-width: 100%; display: block }

/* —— 页眉（sticky 玻璃）—— */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(35, 43, 61, .92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(239, 234, 224, .08) }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; position: relative }
.brand { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); text-decoration: none; white-space: nowrap }
.brand-qi { color: var(--lamp) }
.nav-links { display: flex; align-items: center; gap: 28px }
.nav-links a { color: var(--ink-dim); text-decoration: none; font-size: 15px }
.nav-links a:hover { color: var(--ink) }
/* 裁决（Task 2 review）：簡/繁/EN 是 main.js 注入的、不在 Serif 子集内，必须显式 Sans */
.lang-switch { font-family: var(--sans); font-size: 14px; display: flex; align-items: center; gap: 10px }
.lang-switch a { color: var(--ink-dim); text-decoration: none }
.lang-switch a:hover { color: var(--ink) }
.lang-switch a.current { color: var(--lamp) }
/* 移动端导航：details 零 JS 折叠。桌面态隐藏 summary，并强制渲染 closed details 的内容。 */
.nav-toggle { flex: 1 1 auto; min-width: 0 }
@media (min-width: 721px) {
  /* ::details-content 不支持的引擎跳过此块 → summary 可见，桌面退化为可点的汉堡（而非链接不可达） */
  @supports selector(.nav-toggle::details-content) {
    .nav-toggle summary { display: none }
    .nav-toggle::details-content { content-visibility: visible; display: block }
  }
  .nav-links { justify-content: flex-end }
}

/* —— 首屏 —— */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding: 96px 0 }
.hero h1 { font-size: 44px; line-height: 1.25; margin-bottom: 16px }
.hero p { color: var(--ink-dim); margin-bottom: 28px }
.hero-window { aspect-ratio: 4 / 3; padding: 28px; display: flex; flex-direction: column; gap: 14px }

/* —— 窗（签名元素）—— */
.window { position: relative; border-radius: 8px; background:
  radial-gradient(120% 90% at 30% 20%, rgba(232,184,75,.28), rgba(232,184,75,.06) 55%, transparent 75%), var(--panel);
  box-shadow: 0 0 60px rgba(232,184,75,.10), inset 0 0 0 2px rgba(232,184,75,.25); overflow: hidden }
.window-bars { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--bg), var(--bg)) 50% 50% / 3px 100% no-repeat,
              linear-gradient(var(--bg), var(--bg)) 50% 50% / 100% 3px no-repeat }
.bubble { background: rgba(239,234,224,.10); border: 1px solid rgba(239,234,224,.14);
  border-radius: 12px; padding: 10px 14px; max-width: 78%; opacity: 0; font-size: 15px; line-height: 1.6 }
.bubble.user { margin-left: auto; border-color: rgba(127,168,201,.4) }
@keyframes bubble-in { 0%,100% { opacity: 0; transform: translateY(8px) } 12%,70% { opacity: 1; transform: none } }
.hero-window .bubble.b1 { animation: bubble-in 8s 0s infinite }
.hero-window .bubble.b2 { animation: bubble-in 8s 2.6s infinite }
.hero-window .bubble.b3 { animation: bubble-in 8s 5.2s infinite }

/* —— 房间窗滚动亮灯 —— */
.room-window { display: block; height: 96px; border-radius: 6px; background: var(--panel); margin-bottom: 16px;
  transition: box-shadow .8s, border-color .8s; border: 2px solid rgba(43,52,80,.9) }
.room-window.lit { border-color: rgba(232,184,75,.55); box-shadow: 0 0 48px rgba(232,184,75,.12) }

/* —— 玻璃面板 —— */
.glass { background: var(--glass); backdrop-filter: blur(10px); border: 1px solid rgba(239,234,224,.10); border-radius: 12px }

/* —— 卡片 / 房间网格 —— */
.card { background: var(--panel); border: 1px solid rgba(239, 234, 224, .08); border-radius: 12px; padding: 24px }
.card h3 { font-size: 18px; margin-bottom: 8px }
.card p { color: var(--ink-dim); font-size: 15px }
.rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.room-tag { display: inline-block; margin-top: 12px; padding: 2px 10px; border: 1px solid rgba(127,168,201,.35);
  border-radius: 999px; color: var(--tech); font-family: var(--sans); font-size: 12px }

/* —— 楼层时间线（书房任务全周期）—— */
.timeline { display: flex; gap: 0; flex-wrap: wrap }
.timeline .tl-step { flex: 1 1 150px; padding: 16px; border-top: 3px solid var(--tech); background: var(--panel) }
.timeline .tl-step h3 { font-size: 16px; margin-bottom: 6px }
.timeline .tl-step p { color: var(--ink-dim); font-size: 14px }
.timeline .tl-step .tl-arrow { display: block; margin-top: 10px; color: var(--lamp) }

/* —— 对比表 —— */
table.cmp { width: 100%; border-collapse: collapse }
.cmp th, .cmp td { padding: 12px 14px; border: 1px solid rgba(239,234,224,.12); text-align: left }
.cmp thead th { font-family: var(--serif) }
.cmp tbody th { color: var(--ink) }
.cmp td { color: var(--ink-dim) }
.cmp td.yes { color: var(--lamp) }

/* —— 数据条 —— */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.stats .stat b { font-family: var(--serif); font-size: 34px; color: var(--lamp); display: block }
.stats .stat span { color: var(--ink-dim); font-size: 14px }

/* —— 终端块 —— */
.term { font-family: var(--mono); background: #1A2133; border: 1px solid rgba(127,168,201,.25);
  border-radius: 8px; padding: 16px 18px; color: var(--tech); font-size: 14px; line-height: 1.7; overflow-x: auto }
.term .prompt { color: var(--lamp) }

/* —— CTA —— */
.btn { display: inline-block; padding: 14px 28px; border-radius: 8px; font-weight: 600; text-decoration: none }
.btn-lamp { background: var(--lamp); color: #232B3D }
.btn-lamp:hover { filter: brightness(1.08) }
.btn-ghost { border: 1px solid rgba(232,184,75,.5); color: var(--lamp) }
.btn-ghost:hover { background: rgba(232, 184, 75, .1) }

/* —— FAQ —— */
.faq details { border-bottom: 1px solid rgba(239, 234, 224, .10); padding: 18px 0 }
.faq summary { cursor: pointer; font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink) }
.faq details p { margin-top: 10px; color: var(--ink-dim) }

/* —— 区块 —— */
.section { padding: 96px 0 }
.section h2 { font-size: 30px; margin-bottom: 12px }
.section > .container > p { color: var(--ink-dim); max-width: 720px; margin-bottom: 40px }

/* —— 滚动渐显（main.js 挂 .ready/.shown）—— */
.reveal { transition: opacity .6s, transform .6s }
.reveal.ready { opacity: 0; transform: translateY(24px) }
.reveal.ready.shown { opacity: 1; transform: none }

/* —— 页脚 —— */
.site-footer { padding: 48px 0; border-top: 1px solid rgba(239, 234, 224, .08); color: var(--ink-dim); font-size: 14px }
.footer-entity { font-family: var(--sans); margin-bottom: 6px }
.site-footer a { color: var(--ink-dim); text-decoration: none }
.site-footer a:hover { color: var(--tech) }

/* —— 响应式 —— */
@media (max-width: 720px) {
  .container { padding: 0 16px }
  .section { padding: 64px 0 }
  .hero { grid-template-columns: 1fr; gap: 32px; padding: 64px 0 }
  .hero h1 { font-size: 32px }
  .stats { grid-template-columns: repeat(2, 1fr) }
  .rooms-grid { grid-template-columns: 1fr }
  .nav { flex-wrap: wrap }
  .nav-toggle { flex: 0 0 auto; margin-left: auto }
  .nav-toggle summary { display: block; cursor: pointer; list-style: none; width: 40px; height: 32px }
  .nav-toggle summary::-webkit-details-marker { display: none }
  .nav-toggle summary::before { content: ''; display: block; width: 22px; height: 2px; margin: 15px auto 0;
    background: var(--ink); box-shadow: 0 -7px 0 var(--ink), 0 7px 0 var(--ink) }
  .nav-toggle[open] .nav-links { position: absolute; left: 0; right: 0; top: 100%; display: flex;
    flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px 16px 20px;
    background: rgba(35, 43, 61, .98); border-bottom: 1px solid rgba(239, 234, 224, .10) }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .hero-window .bubble { animation: none; opacity: 1; transform: none }
  .room-window { transition: none }
  .reveal, .reveal.ready { transition: none; opacity: 1; transform: none }
}

/* —— 页面级补位（Task 5 升格共享）——
   badge/slogan4/cta-row/hint/lead/tl-caption 等类名来自 plan 骨架，Task 3 未给组件；
   .rooms2/.rooms4 是 rooms-grid 的 2/4 列变体；结构一律 .section > .container 嵌套
   （.section > .container > p 选择器即此意图，且避免两类同挂时 padding 互相覆盖）。
   原先是首页页头 <style> 块，Task 5 起四内容页与三语页共用，升格进组件表。 */
a.card { display: block; color: var(--ink); text-decoration: none }
.hero .badge { font-size: 14px; letter-spacing: .04em }
.badge .dot { color: #4CAF50 }
.hero .slogan4 { font-family: var(--serif); color: var(--lamp); font-size: 20px }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 8px }
.hero .hint { font-size: 14px }
.card .btn { margin-top: 14px }
.card .term { display: block; margin-top: 14px }
.card code, .cmp code { font-family: var(--mono); font-size: 14px; color: var(--tech) }
.trust { margin-top: 24px; padding: 24px 28px }
.section b { color: var(--ink) }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px }
.facade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 40px }
.facade .room-window { margin-bottom: 0 }
.rooms2 { grid-template-columns: repeat(2, 1fr) }
.rooms4 { grid-template-columns: repeat(4, 1fr) }
.cmp-wrap { overflow-x: auto }
@media (max-width: 720px) {
  .rooms2, .rooms4 { grid-template-columns: 1fr }
}

/* —— 故事页（Task 5）——
   深夜读故事的氛围：底色再压暗一档；窗灯全站只留 hero 一盏静态窗（气泡常显不闪）。 */
body.story { background: #1D2434 }
body.story .window.static .bubble { opacity: 1; animation: none }

/* —— 架构图（⑫，青蓝线稿）——
   线 = --tech（青蓝），点亮的引擎核心 = --lamp，呼应全站窗灯母题。
   窄屏按 .cmp-wrap 先例横向滚动：整个 900 宽 viewBox 缩到 343px 后
   13px 标签只剩 5px 高，糊到读不出，不如让用户横向拨。 */
.arch-wrap { overflow-x: auto; margin-bottom: 40px }
.arch-wrap svg { display: block; width: 100%; height: auto; min-width: 760px }
.arch text { font-family: var(--sans); font-size: 15px; fill: var(--ink) }
.arch .lbl { font-family: var(--mono); font-size: 12px; fill: var(--ink-dim); letter-spacing: .04em }
.arch .box { fill: var(--panel); stroke: var(--tech); stroke-width: 1.5 }
.arch .box-core { fill: var(--panel); stroke: var(--lamp); stroke-width: 1.5 }
.arch .t-mono { font-family: var(--mono); font-size: 13px; fill: var(--tech) }
.arch .t-dim { font-size: 13px; fill: var(--ink-dim) }
.arch .ln { stroke: var(--tech); stroke-width: 1.5; fill: none }
.arch .ln-core { stroke: var(--lamp); stroke-width: 1.5; fill: none }

/* —— 手机分支（下载页）：样式**不在这里**，在三份下载页的页内 <style> 里 ——
   为什么不能放这里：线上 /assets/ 是 30 天强缓存，而 HTML 是 no-cache。发版瞬间回来的
   用户会拿到「新 HTML + 老 CSS」，桌面端就会看到本该只给手机看的面板。
   改那几条样式请去 pages/*/download/index.html，别搬回来。 */