/* =====================================================================
 * header-v2.css（2026-09-15 全站收口版）· 全站导航栏标准层
 * =====================================================================
 * 结构全站唯一（站长裁定「所有页面导航栏保持一致，专门和页面做适配」）：
 *   文字品牌「其一」+ 页副题 ｜ 居中文字导航（本页主色下划线激活态） ｜ ghost 右簇
 * 各页只做两件事：
 *   ① 在下方 --nav-accent 表里报一个本页主色（激活下划线 + hover）；
 *   ② 在 §7 --nav-ground 表里报本页地面色（纱色=地色，头部就融进背景）；
 *      特殊底色页走分段适配（当前仅紫微夜：html[data-theme="dark"]）。
 * 奇门(paipan-claude)/六爻(liuyao-verdict)/紫微(ziwei-night) 三层此前的
 * 头部覆盖已拆除，本层是唯一标准。与 cinema-dark/enhance 的胶囊/白字
 * !important 同力度对抗。
 * 移动档也在这里收口（§5d）：≤720px 的头部尺寸只有这一份口径，不再是
 *   「引了 motion.css 的 11 页 40px、没引的 625 页 56px」两档。
 * 覆盖面（2026-09-15 收口）：14 个手写页在 head 里直接引本文件；其余
 *   知识库 596 页 / 今日局 29 页 / 协议 / 隐私这些生成或手写页没有这一行，
 *   由 backend/asset_versions.py 在响应期按「有 .site-header 且没引过本文件」
 *   注入一份带指纹的 <link>（生成页零重建，样式表吃到正常长缓存）。
 *   → 新增页面照旧自己在 head 里引一次即可，服务端只补缺。
 * DOM 契约（§5 三段式依赖它，新页手写头部时必须遵守）：
 *   头部直接子元素只有三个位置——`.brand`（col 1）、`nav.tabs`（col 2）、
 *   其余控件由 layout.js 的 wrapHeaderRight() 收进 `.nav-right`（col 3）。
 *   所以：品牌必须带 class="brand"，主导航必须是 <nav class="tabs">，
 *   别的按钮别直接 append 到 header 上（JS 会把它们搬进右簇）。 ---- */

/* ---- 1. 每页强调色 ---- */
body[data-page="home"]    { --nav-accent: #0e6f66; }  /* 站青绿 */
body[data-page="paipan"]  { --nav-accent: #875c1f; }  /* 暖金深档（暖纸上 4.6:1） */
body[data-page="bazi"]    { --nav-accent: #a8842f; }  /* 八字金 */
body[data-page="liuyao"]  { --nav-accent: #335044; }  /* 青铜深档 */
body[data-page="ziwei"]   { --nav-accent: #e8c878; }  /* 夜金（暗适配段取同源） */
body[data-page="fengshui"],
body[data-page="tcm"]     { --nav-accent: #0e6f66; }
/* 「其余=松烟墨」显式列全，不再依赖 var() 兜底（这些页原来是空值） */
body[data-page="hecan"],
body[data-page="anli"],
body[data-page="zhishi"],
body[data-page="member"],
body[data-page="share"],
body[data-page="report"],
body[data-page="legal"]   { --nav-accent: #18232a; }
body:not([data-page])     { --nav-accent: #18232a; }  /* 知识库/今日局/404/离线 */

/* ---- 2. 品牌：logo 方块退役，文字品牌 ---- */
.site-header .brand-mark {
  display: none;
}
.site-header .brand-name {
  font-family: "Songti SC", "SimSun", "Noto Serif CJK SC", serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.3em;
  color: #18232a;
}
.site-header .brand p {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #928a7b;
  margin: 2px 0 0;
}

/* ---- 3. 页签：去胶囊/底色/分隔线，文字 + 下划线激活态。
        选择器带 nav.tabs 抬一级特异性：必须压过 cinema-dark 浅色段
        [data-theme="light"] .tab.is-active 的青瓷胶囊（(0,3,0)!important）。 ---- */
.site-header nav.tabs .tab {
  background: none !important; /* cinema-dark 胶囊 / enhance 底色一律退役 */
  box-shadow: none !important;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #565048;
  font-weight: 400;
  letter-spacing: 0.22em;
  padding: 2px 0 3px;
  transition: color 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease);
}
.site-header nav.tabs .tab::after,
.site-header nav.tabs .tab::before {
  content: none;
}
.site-header .tab-sep {
  display: none;
}
.site-header nav.tabs .tab:hover {
  color: var(--nav-accent, #18232a);
  background: none !important;
}
.site-header nav.tabs .tab.is-active {
  color: var(--nav-accent, #18232a) !important;
  background: none !important;
  border-bottom-color: var(--nav-accent, #18232a) !important;
  font-weight: 600;
}

/* ---- 4. 右簇：ghost 一家（CTA / 登录签到 / 账户文字） ---- */
.site-header .auth-button {
  border: 1px solid rgba(24, 35, 42, 0.32);
  border-radius: 2px;
  background: rgba(255, 251, 243, 0.4);
  box-shadow: none;
  color: #243b37;
  font-size: 12px;
  letter-spacing: 0.2em;
}
.site-header .header-cta {
  border: 1px solid rgba(24, 35, 42, 0.45) !important;
  border-radius: 2px;
  background: none !important;
  box-shadow: none !important;
  color: #18232a !important;
  font-weight: 400;
}
.site-header .header-cta:hover {
  background: rgba(24, 35, 42, 0.06) !important;
}
.site-header .user-info {
  color: #565048;
  font-size: 12.5px;
}
/* 右簇的本页视图切换钮（奇门/风水的「记录」）：入 ghost 一家 */
.site-header .tab[data-view="history"] {
  border: 1px solid rgba(24, 35, 42, 0.32);
  border-radius: 2px;
  padding: 6px 14px;
  color: #243b37;
}

/* ---- 4b. 右簇容器（.nav-right，2026-09-15）：layout.js 把头部里除品牌与导航
        之外的控件收进这一个 div，三段式才有「两侧等宽」可言（见 §5）。
        没跑 JS 的页面不存在这个元素，下面 §5 的 grid 会自动把品牌/导航/右簇
        依次放进三列，行为不变。 ---- */
.site-header > .nav-right {
  display: flex;
  align-items: center;
  gap: inherit;        /* 继承头部的 gap（桌面 18 / 移动 10）：收拢前后右簇的间距不变 */
  min-width: 0;
  margin-left: auto;   /* <1100px 的 flex 布局里把右簇推到最右 */
}

/* ---- 5. 导航居中：三段式（品牌左 / 导航正中 / 右簇右）的「正中」。
        此前 .tabs 用 flex:1 吃掉品牌与右簇之间的空档再内部居中，导航的绝对
        位置于是随「品牌宽 − 右簇宽」漂移——线上实测：首页 −7px、六爻/八字/
        典籍/今日局 −47px、协议/隐私 −55px、风水 −92px。同一根导航换页时左右
        跳 40~90px，正是站长说的「看着不统一」。
        改成两翼等宽的 grid（下限见下面那条注释）：中间列就是导航自身的宽度，
        两侧等宽 ⇒ 导航落在真正的视口中线上。grid 的列不会重叠，所以不像
        09-12 那版绝对定位通栏那样在窄档压住两侧。
        ≥1100px 生效；更窄的档位维持 flex 布局（那里导航本来就收进汉堡了）。 ---- */
@media (min-width: 1100px) {
  .site-header {
    display: grid;
    /* 两翼的下限取 min-content：空间够时两翼等宽 ⇒ 导航正中；不够时（风水右簇是
       三个控件、实测 344px 宽，而 1280 档两侧各只分到 280px）宁可让导航偏一点点，
       也不让右簇的按钮溢出自己的轨道压到页签上——2026-09-15 实测过 0 下限那版在
       风水 1100/1280 两档分别压进去 28px / 64px。现版本：风水 1100 档偏 −54px
       （页签最小 ~500px + 右簇 344 + 两翼 56 已经超过 1100，物理上摆不平），
       1280~1439 靠 §5b 紧凑档回到 0，其余 17 页 × 各档全部 0。 */
    grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
    align-items: center;
  }
  .site-header > .brand { grid-area: 1 / 1; justify-self: start; }
  .site-header > nav.tabs { grid-area: 1 / 2; margin: 0; }
  .site-header > .nav-right { grid-area: 1 / 3; justify-self: end; justify-content: flex-end; margin-left: 0; }
}

/* ---- 5b. 紧凑档（1100~1439）：十个页签在「品牌 + 右簇」之间放不下
        （六爻/紫微实测「我的」被裁进横滑），收 min-width、给小内边距 + 阶梯 gap。
        上限从 1279 提到 1439（2026-09-15）：风水页右簇是三个控件（记录 + 开始排盘
        + 登录）实测 344px 宽，1280 档两翼各只分到 280px，导航会被挤离中线 90px；
        紧凑档把页签收到 550px 后，1280 也一样分得下，导航回到中线。 ≥1440 才放开字间。 ---- */
@media (min-width: 1100px) and (max-width: 1439px) {
  .site-header .tabs {
    gap: 10px;
  }
  .site-header nav.tabs .tab {
    min-width: 0;
    padding: 2px 9px 3px;
  }
}

/* ---- 5c. 宽桌面档（≥1440）：字间给足呼吸，疏排是全站排印口径 ---- */
@media (min-width: 1440px) {
  .site-header .tabs {
    gap: 16px;
  }
  .site-header nav.tabs .tab {
    padding: 2px 12px 3px;
  }
}

/* ---- 5d. 移动档（≤720px）：头部紧凑化的**唯一口径**（2026-09-15 收口）。
        背景：enhance.css 给 .site-header.is-mobile 报了 min-height:52px / padding 6px 14px，
        motion.css §I 用同权重 !important + 更晚加载把它压回 40px / 2px 12px——但 motion.css
        只有 11 个手写页引了，知识库 596 页 / 今日局 30 页 / 分享 / 报告 / 协议 / 隐私
        都没引，于是同一根导航在手机上分成两档：40px（首页/中医/八字/紫微…）与 56px
        （分享/报告/协议/隐私/知识库/今日局），换页头部会突然长高 16px、菜单按钮从
        68×30 跳到 74×38。本文件在**每一页**都最后加载（生成页由 asset_versions 注入），
        所以紧凑档放这里就是全站唯一来源。取值与 motion.css §I 逐字一致，11 个老页面
        视觉上零变化；品牌与菜单按钮两项一起收，否则光是头部变矮会把按钮顶出去。 ---- */
@media (max-width: 720px) {
  .site-header.is-mobile {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 40px !important;
    padding: 2px 12px !important;
    gap: 8px;
  }
  .site-header.is-mobile .brand {
    padding: 1px 4px;
    min-height: 34px;
    margin-right: auto;
  }
  .site-header.is-mobile .menu-trigger {
    height: 30px;
    padding: 0 9px;
  }
  /* 主题切换按钮同档收紧，并压过 enhance.css ≤720px 的全局触控热区
     （button 的 min-height:44px 会把它撑高、连带抬高整个头部） */
  .site-header.is-mobile .theme-toggle {
    width: 28px;
    height: 28px;
    min-height: 28px !important;
  }
}

/* ---- 6. 夜适配（当前仅紫微）：星空页头部不做纸条，做夜幕——同一条「上浓下无」
        的公式，只把地面色换成夜色。同力度压过 cinema-dark 暗色段。 ---- */
html[data-theme="dark"] body .site-header {
  --nav-ground: 12, 18, 34;   /* 夜空：纱薄了，色要更沉才压得住星点 */
  --nav-a-top: 0.88;
  --nav-a-mid: 0.46;
  background: linear-gradient(180deg,
      rgba(var(--nav-ground), var(--nav-a-top)) 0%,
      rgba(var(--nav-ground), var(--nav-a-mid)) 58%,
      rgba(var(--nav-ground), 0) 100%) !important;
  border-bottom-width: 0 !important;      /* 同 §7：不归零就会漏出一条 1px 实边 */
  background-repeat: no-repeat !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* 夜幕上文字靠亮度差，不靠底色差：纱比浅色页薄，字就得实一档
   （0.62 实测在暗幕上只剩 ~4.3:1，贴着小字 4.5 的红线，提到 0.72） */
html[data-theme="dark"] .site-header .brand-name {
  color: #f0ead8;
}
html[data-theme="dark"] .site-header .brand p {
  color: rgba(240, 234, 216, 0.55);
}
html[data-theme="dark"] .site-header .tab {
  color: rgba(240, 234, 216, 0.72) !important;
  background: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .site-header .tab:hover {
  color: #e8c878 !important;
  background: none !important;
}
html[data-theme="dark"] .site-header .tab.is-active {
  color: #e8c878 !important;
  border-bottom-color: #e8c878 !important;
}
html[data-theme="dark"] .site-header .header-cta {
  border: 1px solid rgba(232, 200, 120, 0.55) !important;
  background: none !important;
  box-shadow: none !important;
  color: #e8c878 !important;
}
html[data-theme="dark"] .site-header .header-cta:hover {
  background: rgba(232, 200, 120, 0.1) !important;
}
html[data-theme="dark"] .site-header .auth-button {
  border-color: rgba(240, 234, 216, 0.3);
  background: none;
  color: rgba(240, 234, 216, 0.8);
}
html[data-theme="dark"] .site-header .user-info {
  color: rgba(240, 234, 216, 0.6);
}
/* 夜页菜单钮：浅色页的墨球在夜幕上不可见，换同构浅 ghost */
html[data-theme="dark"] .menu-trigger {
  background: none !important;
  border: 1px solid rgba(240, 234, 216, 0.35) !important;
  color: rgba(240, 234, 216, 0.85) !important;
  box-shadow: none;
}
html[data-theme="dark"] .menu-trigger:hover {
  background: rgba(240, 234, 216, 0.08) !important;
}

/* ---- 7. 背景适配（站长口径「跟每个页面背景适配，融入背景、别显突兀」）：
        头部不做贴上去的纸条，做本页地面色的一层**上浓下无**的薄雾。
        正典是首页 9/13 定下的「头部融进画面」（home.css：透明的是一条底，
        不是布局），本层是它的一般化——同一条公式，各页只换一个地面色：
          · 背景 = linear-gradient(地面色：顶 94% → 58% 处 62% → 底 0)
          · 底边 alpha 归零 ⇒ 下沿没有任何分界线：不是「纱压在纸上」，
            而是地面自己渐隐进头部（这是与旧版半透纱最大的区别：旧版无论
            多接近地色，那条 border-bottom 仍会画出「贴上去的一条」）
          · 因此 backdrop-filter 一并撤掉（模糊的边界是硬的，会重新画一条线）、
            下边框与投影也去掉（同理）。顺带省下 625 个页面滚动时的
            backdrop 重绘开销（P0-1 奇门页瘦身同源的一笔）。
        各页只报一个地面色 --nav-ground（都是线上渲染实测的像素值，不是估色）；
        知识库 596 页 / 今日局 29 页 / 协议 / 隐私没有写数据属性，吃默认纸地——
        本文件由 backend/asset_versions.py 在响应期注入（生成页零重建）。 ---- */
/* 选择器为什么是 body:not([data-page="home"]) 而不是光一个 .site-header：
   本层要压过 bazi-v2.css:73（`header.site-header, html[data-theme="light"] .site-header`
   一整套 rgba(247,245,237,0.95)!important）与 cinema-dark.css:709
   （`[data-theme="light"] .site-header` 的 0.92 纸底 !important）——那两条是
   「每页自己给头部上底色」时代的遗留，权重都是 (0,2,x)，光靠 .site-header
   的 (0,1,0) 加 !important 压不住：同为 !important 时比权重，不比先后。
   于是本层取 (0,2,1) 与它们同价、靠「本文件最后加载」取胜；而首页
   （`body[data-page="home"] .site-header`，同价）必须继续由 home.css 接管
   ——那里是满屏山水，头部要全透 + 一层极淡纸光，不是纸地上的薄雾——
   所以用 :not 把首页让出去，而不是去动 home.css 的旧权重。 */
body:not([data-page="home"]) .site-header {
  --nav-ground: 236, 230, 220;                 /* 站点纸地（实测 #ECE6DC 一带） */
  --nav-a-top: 0.94;                           /* 顶部浓度：字要压得住 */
  --nav-a-mid: 0.62;                           /* 58% 处浓度 */
  background: linear-gradient(180deg,
      rgba(var(--nav-ground), var(--nav-a-top)) 0%,
      rgba(var(--nav-ground), var(--nav-a-mid)) 58%,
      rgba(var(--nav-ground), 0) 100%) !important;
  /* 这两条是「下沿无分界线」的机械前提，缺一条就会漏出一条 1px 实边
     （2026-09-15 实测：紫微桌面 y=67 整行 rgb(28,35,52)，上下行都是 71~80）：
       · border-bottom-width 必须归零——styles.css:232 有一条 1px 的底边框，
         只改颜色不改宽度的话，边框盒比 padding 盒高 1px；
       · background-repeat 必须 no-repeat——渐变图按 background-origin:padding-box
         只画 67px 高，默认 repeat 会把第 68 行补成**顶部那一档浓度**（正是最浓的
         0.94/0.88），于是在头部最后一行重新画出一条实边。浅色页上它和纸色同色
         所以肉眼几乎看不见，暗夜页上就是一道黑线。 */
  border-bottom-width: 0 !important;
  background-repeat: no-repeat !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* 有自有底色的页：报自己的地面色。画面底（八字水墨、奇门晨光、六爻宣纸）
   另把浓度调薄——纱下面是一张画，不是纸，浓了就成纸条；首页山水同理，
   只是它自己的调校留在 home.css（0.72/0.34 + ::after）。 */
body[data-page="bazi"]   { --nav-ground: 241, 238, 228; --nav-a-top: 0.78; --nav-a-mid: 0.40; }
body[data-page="paipan"] { --nav-ground: 252, 246, 237; --nav-a-top: 0.86; --nav-a-mid: 0.48; }
body[data-page="liuyao"] { --nav-ground: 240, 242, 239; --nav-a-top: 0.88; --nav-a-mid: 0.52; }
body[data-page="tcm"]    { --nav-ground: 241, 238, 228; }