/* ============================================================
   P1 三栏骨架（2026-11-01）
   - 左 320 / 中自适应 / 右 380，间距 28px
   - 三个步骤小标：所有三栏模块页统一显示（见 §2）
   - 右栏未起卦时卦辞面板虚线占位框
   所有改动集中在此文件；用 body .xxx 提高优先级覆盖；
   不改 app.js、不改其它 CSS、不改配色 token。
   ≤911px 保留现有断点行为（不动现有媒体查询）。

   2026-11-03 W 批：恢复所有模块的三段标。依据文档
   `…\04-交接包与需求\外部执行-20261102\19-排版规范-壹贰叁与中栏.md`
   §3「这套标现在只在「每日一卦」有。要推广到所有模块页」，
   以及用户原话「一贰叁这些看怎么重新排版好，每个界面都得照顾到」——
   文档没有「砍掉三段标」这条建议，S 批按「只有出卦辞的模块才配」收窄是误读。
   文案用 --step-* 自定义属性集中定义（§1.5），四档断点只引用，避免文案漂移。
   ============================================================ */

/* 1.5 三段标文案（唯一事实源，四档断点 §2/§4/§5 只引用 --step-*）
   左栏壹 / 中栏贰 / 右栏叁；文案按模块语义给两字标题，不写死在断点里。
   默认 = 每日一卦（心诚问事 / 观卦 / 解卦）；
   八字、紫微、合婚、财运健康都走出生信息 → 盘 → 解读，统一 填生辰 / 观盘；
   奇门 = 定起局时间 / 观局；塔罗 = 心诚问事 / 观牌；掐指一算 = 观掌；
   解梦不排盘 = 述梦 / 析梦 / 解梦。 */
body {
  --step-1: "壹 │ 心诚问事";
  --step-2: "贰 │ 观卦";
  --step-3: "叁 │ 解卦";
}
body:has(.nav-links a.active[data-mod="bazi"]),
body:has(.nav-links a.active[data-mod="ziwei"]),
body:has(.nav-links a.active[data-mod="hunyin"]),
body:has(.nav-links a.active[data-mod="caiyun"]) {
  --step-1: "壹 │ 填生辰";
  --step-2: "贰 │ 观盘";
}
body:has(.nav-links a.active[data-mod="qimen"]) {
  --step-1: "壹 │ 定起局时间";
  --step-2: "贰 │ 观局";
}
body:has(.nav-links a.active[data-mod="tarot"])       { --step-2: "贰 │ 观牌"; }
body:has(.nav-links a.active[data-mod="xiaoliuren"])  { --step-2: "贰 │ 观掌"; }
body:has(.nav-links a.active[data-mod="jiemeng"]) {
  --step-1: "壹 │ 述梦";
  --step-2: "贰 │ 析梦";
  --step-3: "叁 │ 解梦";
}

/* 后台目录里的通用三栏模块，按各自输入给标题（左=填什么，中=看什么）。
   右栏统一 解卦；解梦 / 胎梦不排卦，用 解梦。 */
body:has(.nav-links a.active[data-mod="huangli"])  { --step-1: "壹 │ 选日期"; --step-2: "贰 │ 观历"; }
body:has(.nav-links a.active[data-mod="phone_luck"]) { --step-1: "壹 │ 填号码"; --step-2: "贰 │ 观数"; }
body:has(.nav-links a.active[data-mod="naming"])    { --step-1: "壹 │ 填信息"; --step-2: "贰 │ 观名"; }
body:has(.nav-links a.active[data-mod="palmistry"]) { --step-1: "壹 │ 拍照"; --step-2: "贰 │ 观掌"; }
body:has(.nav-links a.active[data-mod="physiognomy"]) { --step-1: "壹 │ 传图"; --step-2: "贰 │ 观相"; }
body:has(.nav-links a.active[data-mod="moles"])     { --step-1: "壹 │ 标记"; --step-2: "贰 │ 观痣"; }
body:has(.nav-links a.active[data-mod="zejiri"])    { --step-1: "壹 │ 选事项"; --step-2: "贰 │ 观日"; }
body:has(.nav-links a.active[data-mod="daliuren"])  { --step-1: "壹 │ 定起课"; --step-2: "贰 │ 观课"; }
body:has(.nav-links a.active[data-mod="liunian"])   { --step-1: "壹 │ 填生辰"; --step-2: "贰 │ 观年"; }
body:has(.nav-links a.active[data-mod="career_fortune"]),
body:has(.nav-links a.active[data-mod="love_fortune"]),
body:has(.nav-links a.active[data-mod="study_fortune"]) { --step-1: "壹 │ 填生辰"; --step-2: "贰 │ 观盘"; }
body:has(.nav-links a.active[data-mod="fengshui"])  { --step-1: "壹 │ 填宅向"; --step-2: "贰 │ 观局"; }
body:has(.nav-links a.active[data-mod="meihua"])    { --step-1: "壹 │ 报数字"; --step-2: "贰 │ 观卦"; }
body:has(.nav-links a.active[data-mod="taiyi"])     { --step-1: "壹 │ 定年份"; --step-2: "贰 │ 观局"; }
body:has(.nav-links a.active[data-mod="shaozi"])    { --step-1: "壹 │ 定生辰"; --step-2: "贰 │ 观数"; }
body:has(.nav-links a.active[data-mod="life_number"]) { --step-1: "壹 │ 填生日"; --step-2: "贰 │ 观数"; }
body:has(.nav-links a.active[data-mod="fetus_dream"]) {
  --step-1: "壹 │ 述梦";
  --step-2: "贰 │ 析梦";
  --step-3: "叁 │ 解梦";
}

/* 英文界面：只在 <html data-locale="en" lang="en"> 双条件成立时生效。
   若只有 data-locale 残留、lang 仍是 zh-CN（测试/切换后未重排），三段标保持中文，
   避免“中文页只剩步骤标是英文”。
   注意每条英文模块规则都要写全三项 —— html[data-locale="en"][lang="en"] body 的
   优先级低于 body:has(...)，只覆盖单项会被中文默认值盖回去。 */
html[data-locale="en"][lang="en"] body {
  --step-1: "1 │ Ask";
  --step-2: "2 │ Observe";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="bazi"]),
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="ziwei"]),
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="hunyin"]),
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="caiyun"]),
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="career_fortune"]),
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="love_fortune"]),
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="study_fortune"]) {
  --step-1: "1 │ Birth";
  --step-2: "2 │ Chart";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="qimen"]) {
  --step-1: "1 │ Timing";
  --step-2: "2 │ Chart";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="tarot"]) {
  --step-1: "1 │ Ask";
  --step-2: "2 │ Draw";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="xiaoliuren"]) {
  --step-1: "1 │ Ask";
  --step-2: "2 │ Palm";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="jiemeng"]),
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="fetus_dream"]) {
  --step-1: "1 │ Dream";
  --step-2: "2 │ Decode";
  --step-3: "3 │ Answer";
}

/* 通用三栏模块的英文标题：与上面中文逐条对应，避免英文界面夹中文 */
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="huangli"]) {
  --step-1: "1 │ Date";
  --step-2: "2 │ Calendar";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="phone_luck"]) {
  --step-1: "1 │ Number";
  --step-2: "2 │ Digits";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="naming"]) {
  --step-1: "1 │ Details";
  --step-2: "2 │ Names";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="palmistry"]) {
  --step-1: "1 │ Photo";
  --step-2: "2 │ Palm";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="physiognomy"]) {
  --step-1: "1 │ Photo";
  --step-2: "2 │ Face";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="moles"]) {
  --step-1: "1 │ Mark";
  --step-2: "2 │ Moles";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="zejiri"]) {
  --step-1: "1 │ Event";
  --step-2: "2 │ Date";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="daliuren"]),
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="taiyi"]) {
  --step-1: "1 │ Timing";
  --step-2: "2 │ Board";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="liunian"]) {
  --step-1: "1 │ Birth";
  --step-2: "2 │ Year";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="fengshui"]) {
  --step-1: "1 │ Facing";
  --step-2: "2 │ Board";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="meihua"]) {
  --step-1: "1 │ Numbers";
  --step-2: "2 │ Hexagram";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="shaozi"]) {
  --step-1: "1 │ Birth";
  --step-2: "2 │ Numbers";
  --step-3: "3 │ Read";
}
html[data-locale="en"][lang="en"] body:has(.nav-links a.active[data-mod="life_number"]) {
  --step-1: "1 │ Birthday";
  --step-2: "2 │ Numbers";
  --step-3: "3 │ Read";
}

@media (min-width: 912px) {

  /* 1. 三栏比例：320px minmax(0,1fr) 380px，间距 28px
     （覆盖 style.css 的 21%/1fr/21% 与 @media(max-width:1100px) 的 24%/1fr/24%；
      body 前缀把特异性从 0-1-0 提到 0-1-1，天然压过旧规则） */
  body .stage {
    grid-template-columns: 320px minmax(0, 1fr) 380px;
    gap: 28px;
  }

  /* 2. 三步骤小标（2026-11-03 P1-2 重排；W 批恢复全模块）
     - 12–13px / 500 / 字距 .3em；壹/贰/叁 朱砂 #B23A2E，文案墨褐 #4E4235，
       中间「│」檀金 #C5A059（用 background-clip:text 三段渐变实现一伪元素三色）。
     - 所有模块都显示（文案见 §1.5）：左/右栏走文档流（栏内 padding-top:12px），
       中栏 flex 垂直居中会把标带下去，故中栏标绝对定位 top:20px，
       同时中栏 padding-top:38px，让三栏正文都从同一 y 开始。 */
  body #inputCol::before,
  body .stage-center::before,
  body .side-col:last-child::before {
    display: block;
    font-size: clamp(12px, .85vw, 13px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .3em;
    color: transparent;
    background-image: linear-gradient(90deg, #B23A2E 0 1.2em, #C5A059 1.2em 3.5em, #4E4235 3.5em 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: var(--serif, inherit);
    white-space: nowrap;
    text-align: center;
    width: fit-content;
    margin: 0 auto 12px;
    /* 2026-11-03 用户：「壹/贰/叁 整体往下移一点」——只挪标，不挪正文 */
    position: relative;
    top: 8px;
  }
  body #inputCol::before            { content: var(--step-1); }
  body .side-col:last-child::before { content: var(--step-3); }

  /* 三标与栏顶统一 12px；左右栏正文顺带从同一 y 起 */
  body #inputCol,
  body .side-col:last-child { padding-top: 12px; }

  /* 中栏：标固定到栏顶，正文统一下移，避免被垂直居中带偏。
     2026-11-03 第二轮：补 position:relative —— 中栏的 ::before 是 absolute，
     之前 912–1100 靠 .stage-center 上的 identity transform 偶然撑出包含块，
     不同模块 transform 状态不同，标会掉到 76px 以下；显式定位后 top:20px 恒为
     中栏顶(76)+20=96，与左右栏 76+12+8 同线。 */
  body .stage-center { position: relative; padding-top: 38px; }
  body .stage-center::before {
    content: var(--step-2);
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }

  /* 3. 右栏未起卦：卦辞面板加 1px dashed 虚线占位框（用现有边框色 --line）
     result-panel 在右栏里 flex:1，天然撑满与出结果后接近的高度，避免跳变。 */
  body .side-col:last-child .result-panel {
    border: 1px dashed var(--line, rgba(200, 169, 98, 0.16));
    border-radius: 6px;
  }
  /* 起卦后竖排文案淡出（aside.verse-hidden）时，虚线框一并隐去，避免与
     固定定位的 result-slide-in 浮层形成双重框。 */
  body .side-col:last-child.verse-hidden .result-panel {
    border-color: transparent;
  }
}

/* 3.5 2026-11-03 第二轮：912–1100 不再把中栏标补到 96px。
   上面 .stage-center 已显式 position:relative，标跟着中栏走（top:20px → 96），
   矮屏（≤44rem，.stage 上内边距 4.25rem）时中栏整体上移 8px，标自然同线（88），
   无需再按 .stage 的 padding 单独补偿。 */

/* 3.6 2026-11-03 第三轮实测复核：1440/1024 下三栏栏顶均为 76px，
   左/右栏标 76+12(padding)+8(relative)=96、中栏 76+20(absolute)=96，本来就同线；
   上一轮根据旧的「栏顶 101px」写的 -5px 补偿把「贰」抬到 73px，这里撤销。 */

/* 4. ≤480 手机：同一套步骤标（12px / 字距 .2em / 下方 8px）
   窄屏三栏已堆叠为单列，标走文档流、居中贴齐栏中轴；nowrap 保证「壹 │ 定起局时间」不换行。 */
@media (max-width: 480px) {
  body #inputCol::before,
  body .stage-center::before,
  body .side-col:last-child::before {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .2em;
    color: transparent;
    background-image: linear-gradient(90deg, #B23A2E 0 1.2em, #C5A059 1.2em 3.5em, #4E4235 3.5em 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: var(--serif, inherit);
    white-space: nowrap;
    text-align: center;
    width: fit-content;
    margin: 0 auto 8px;
    /* 2026-11-03 第二轮：与桌面同口径整体再下移 8px（relative 不影响正文排版） */
    position: relative;
    top: 8px;
  }
  /* 中栏是 flex + align-items:center，堆叠后标与正文同一中轴 */
  body .stage-center::before { align-self: center; }

  body #inputCol::before            { content: var(--step-1); }
  body .stage-center::before        { content: var(--step-2); }
  body .side-col:last-child::before { content: var(--step-3); }
}

/* 5. 481–911 补上三个步骤标（2026-11-03 用户截图指出该区间无标）
   481–780 单列堆叠：标走文档流、水平居中到栏中轴；
   781–911 仍是三栏：左/右栏文档流居中，中栏绝对定位到栏顶中轴。 */
@media (min-width: 481px) and (max-width: 780px) {
  body #inputCol::before,
  body .stage-center::before,
  body .side-col:last-child::before {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .2em;
    color: transparent;
    background-image: linear-gradient(90deg, #B23A2E 0 1.2em, #C5A059 1.2em 3.5em, #4E4235 3.5em 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: var(--serif, inherit);
    white-space: nowrap;
    text-align: center;
    width: fit-content;
    margin: 0 auto 10px;
  }
  body .stage-center::before { align-self: center; }

  body #inputCol::before            { content: var(--step-1); }
  body .stage-center::before        { content: var(--step-2); }
  body .side-col:last-child::before { content: var(--step-3); }
}

@media (min-width: 781px) and (max-width: 911px) {
  body #inputCol::before,
  body .side-col:last-child::before {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .2em;
    color: transparent;
    background-image: linear-gradient(90deg, #B23A2E 0 1.2em, #C5A059 1.2em 3.5em, #4E4235 3.5em 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: var(--serif, inherit);
    white-space: nowrap;
    text-align: center;
    width: fit-content;
    margin: 0 auto 12px;
    position: relative;
    top: 8px;
  }
  body .stage-center::before {
    display: block;
    content: var(--step-2);
    position: absolute;
    /* 2026-11-03 第二轮：中栏显式 position:relative 后，20px 即栏顶 76+20=96，三标同线 */
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .2em;
    color: transparent;
    background-image: linear-gradient(90deg, #B23A2E 0 1.2em, #C5A059 1.2em 3.5em, #4E4235 3.5em 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: var(--serif, inherit);
    white-space: nowrap;
    text-align: center;
    margin: 0;
  }
  body #inputCol,
  body .side-col:last-child { padding-top: 12px; }
  body .stage-center { position: relative; padding-top: 38px; }

  body #inputCol::before            { content: var(--step-1); }
  body .side-col:last-child::before { content: var(--step-3); }
}

/* 6. 顶部导航：1440/1280 整体右移贴近搜索框（2026-11-03 用户实测原 345px 空档）。
   skin-gemini.css 的 `body .nav-links{flex:0 1 auto}` 优先级更高，本文件在其后加载，
   用同等 specificity 覆盖为 flex:1 + 右对齐，只留 24px。 */
@media (min-width: 1041px) {
  body .nav-links {
    flex: 1 1 auto;
    justify-content: flex-end;
    /* 2026-11-03 第二轮：与搜索框留 28px（用户口径 24–32px） */
    margin-right: 28px;
  }
}

/* 7. 390 窄屏：主链只留「每日一卦 + 更多」，其余三项在「更多」里仍可达，
   避免按钮被裁到视口外（2026-11-03 用户截图）。 */
@media (max-width: 480px) {
  body .nav-links { flex: 1 1 auto; margin-right: 8px; gap: 8px; }
  body .nav-side { gap: 8px; }
  body .nav-side .lang-btn { margin-right: 0; }
  body .nav-links > a[data-mod="bazi"],
  body .nav-links > a[data-mod="ziwei"],
  body .nav-links > a[data-mod="qimen"] { display: none; }
}

/* 8. 「更多」单条目分组居中（2026-11-03 用户截图：「探索典籍」里只有典籍库一项，
   靠左不好看）。m02.css 把 `.nav-links a` 设成 inline-flex，宽度收缩成内容宽、
   自然贴左；这里把组内唯一链接拉满组宽，文字回到组中轴。 */
@media (min-width: 900px) {
  body .nav-links .nav-more-list .nm-group > a:only-of-type {
    display: block;
    width: 100%;
  }
}

/* 9. 顶部导航右组间距与主链同档（2026-11-03 第四轮）。
   基准 = 「每日一卦」主链实测 gap：1440=23.04、1280=20.48、390=8（窄屏统一 8）。
   旧值：nav-side 6px、搜索框右边距 17.3px、lang-btn 额外 4px → 全部收口到同一档。
   罗盘 52px 浮层：app.js 也已改成读 .nav-links 的 columnGap，登录右沿 → 罗盘左沿 = 同一 gap；
   这里 padding-right = gap + 40px 给罗盘 + 右缘留白（实测 1440 罗盘右缘距视口 13.6px）。 */
@media (min-width: 481px) {
  body .nav-side { gap: clamp(1rem, 1.6vw, 1.75rem); }
  body .nav-search { margin-right: clamp(1rem, 1.6vw, 1.75rem); }
  body .nav-side .lang-btn { margin-right: 0; }
}
@media (min-width: 1200px) {
  body .nav-side { padding-right: calc(clamp(1rem, 1.6vw, 1.75rem) + 40px); }
}

/* 9.5 「更多」菜单条目不贴左（2026-11-03 第四轮）。
   实测（1440）：组宽 195px，项被 m02.css `body .nav-links a{display:inline-flex}`
   压成内容宽 86–164px，逐行左贴边（x=349.4 起），右缘空 22–130px，行内 1/2/3 项
   混排像没对齐。组内改 2 格栅格（列宽 95.5px）+ 文字居中：一整行 hover 仍在，
   两列组仍等宽 + 14px 中缝；单项组（探索典籍）保持整行居中（见 §8 那条规则）。 */
@media (min-width: 900px) {
  body .nav-links .nav-more-list .nm-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4px;
  }
  body .nav-links .nav-more-list .nm-gname { grid-column: 1 / -1; }
  body .nav-links .nav-more-list .nm-group > a,
  body .nav-links .nav-more-list .nm-group > .nm-item {
    display: block; width: 100%;
    /* 格宽 95.5px，内边距收到 8px：5 字标题（手机号吉凶）刚好单行，不再折行 */
    padding-left: 8px !important; padding-right: 8px !important;
  }
  /* 格宽 95.5px：字距归零后 5 字标题（手机号吉凶 = 75px + 16 内边距）单行放得下；
     只有「掐指一算（小六壬）」这类 9 字标题才折两行 */
  body .nav-links .nav-more-list .nm-title { white-space: normal; letter-spacing: 0; }
  body .nav-links .nav-more-list .nm-group:has(> a:only-of-type) { grid-template-columns: 1fr; }
}

/* 10. 英文界面（html[data-locale="en"]）的三步骤标：文案已在 §1.5 用 --step-*
    自定义属性与中文模块一一对应定义，这里不再重复写 content。 */