/* 排盘纸（卦纸）v25 —— 与 _design/排盘纸_v25_日月旬空字形对齐.html 一一对应
   尺寸＝设计稿 px × 2（375px 视口 → calc(750 * var(--rp))）；卡片内容宽 calc(638 * var(--rp))（＝设计稿 319px × 2）
   ⚠️ 组件是 styleIsolation: apply-shared（页面与 app.wxss 的样式会渗进组件内部），
      所以内部类名一律带 bd- 前缀 —— 曾因 board 的 .yao 与 pages/liuyao/liuyao.wxss 的 .yao 同名，
      被页面的 align-items:center 改写父容器对齐方式，爻线容器塌成 0 宽（真机上「没有爻线」）。
   ⚠️ 颜色一律写 var(--x, 兜底色)：变量万一生效不了，爻线也不会变成透明。 */
.board {
  background: var(--card, #ffffff);
  border-radius: calc(24 * var(--rp));
  padding: calc(30 * var(--rp)) calc(24 * var(--rp)) calc(26 * var(--rp));
  margin-bottom: calc(24 * var(--rp));
  box-shadow: var(--shadow, 0 calc(2 * var(--rp)) calc(12 * var(--rp)) rgba(43, 38, 33, .05));
}

/* 顶行三栏：起卦方式（左）｜ 年柱 · 农历 · 时辰（**中间**，用户 2026-10-16 要求从问事行末尾搬到这一行）｜ 公历时间（右）。
   ⚠️ 字号 22 → calc(20 * var(--rp))、左栏改短名（render.js 的 modeShort）：三样并排的宽度账（375 基准 px，可用 319）＝
      左「六次摇卦」41.2 ＋ 中 meta 最坏 155.8 ＋ 右公历 92.8 ＝ 289.8 ✓（再加 letter-spacing calc(1 * var(--rp)) 的 ~17px 仍够）。
      若用全称「六次摇卦 · 三枚铜钱」＋calc(22 * var(--rp))，最坏 382 ＞ 319 ⇒ 三样一定会挤在一起。
   ⚠️ 中栏用 flex:1 + text-align:center（＝在左右两栏之间的**剩余空间**里居中），这样无论
      起卦方式／农历时柱／公历时间各自多长都不会撞上。
      宽度账（calc(20 * var(--rp))＝10px，375 基准 px，可用 319）：左「六次摇卦」42.7 ＋ 中 meta 142.2 ＋ 右公历 100.3
      ＝ 285.2 ✓（余 33.8 ⇒ 左右各留约 17px 空隙）。
      **不要**改成「绝对定位居中于卡片中线」：中栏 142 宽、右栏从 246.7 起，固定中线会重叠 12px。
      **也不要把中栏的 <text> 直接当 flex item**：小程序里 span不按 flex:1 拉伸/居中，实测偏右 calc(76 * var(--rp))
      —— 必须 div包一层（见 board.wxml）。
      两图口径：导出的卦图按同一公式算中线（CX＋左栏宽 与 右栏左缘 的中点，宽度用 tw 估算），
      与屏幕真实字体的差约 2px（误差只在「左栏宽−右栏宽」的差额上，取平均后减半）。 */
.bd-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: calc(20 * var(--rp)); color: var(--ink-3, #a2988b); letter-spacing: calc(1 * var(--rp));
}
.bd-mode, .bd-time { flex: 0 0 auto; white-space: nowrap; }
.bd-tmeta { flex: 1; min-width: 0; text-align: center; white-space: nowrap; }

/* 问事 ＋ 年柱 · 农历 · 时辰 */
.bd-ask {
  display: flex; align-items: baseline;
  margin-top: calc(26 * var(--rp)); font-size: calc(28 * var(--rp)); color: var(--ink, #2b2621); letter-spacing: calc(1 * var(--rp));
}
/* 「问」标签：问事正文 2026-10-18 加大到 calc(32 * var(--rp)) 后，calc(22 * var(--rp)) 的标签显得过小 ⇒ 跟着到 calc(26 * var(--rp))
   （仍比正文小一档，是标签不是内容）。宽度账：ask-layout 的 QK_W 同步 11 → 13。 */
.bd-qk { font-size: calc(26 * var(--rp)); color: var(--ink-3, #a2988b); margin-right: calc(10 * var(--rp)); }
/* 问事（＋紧随其后的年柱/农历/时辰）：
   行数＝五行、问题该截多短 —— 都由 utils/ask-layout.js 先算好（info.askFlow），
   这里只负责把「行 → 片段」画出来，**不再用 line-clamp**（CSS 截的是尾部，而我们要保 meta）。 */
.bd-qwrap { flex: 1; min-width: 0; }
.bd-askline { display: block; }
/* 详情页：问事行可点开改（.bd-tapable 只做光标提示，不改任何盒模型 ⇒ 排版不动） */
.bd-tapable { cursor: pointer; }
/* 编辑态 textarea：与 .bd-qt 同一套字号/行高/字距，视觉上就是那行字本身可改 */
.bd-qedit {
 width: 100%; box-sizing: border-box; padding: 0; margin: 0;
 background: transparent; border: none;
 font-size: calc(32 * var(--rp)); line-height: 1.6; letter-spacing: calc(1 * var(--rp)); color: var(--ink, #2b2621);
 min-height: calc(51 * var(--rp)); max-height: calc(460 * var(--rp));
}
.bd-qph { font-size: calc(32 * var(--rp)); color: var(--ink-3, #a2988b); letter-spacing: calc(1 * var(--rp)); }
.bd-qt { font-size: calc(32 * var(--rp)); color: var(--ink, #2b2621); letter-spacing: calc(1 * var(--rp)); }
.bd-qt.empty { color: var(--ink-3, #a2988b); }
/* 年柱农历时辰：接在问题末尾，小字灰色做区分；可以跟着一起换行（不是独立一行） */
.bd-meta { margin-left: calc(16 * var(--rp)); font-size: calc(22 * var(--rp)); color: var(--ink-3, #a2988b); }

/* 十三神煞：5 列**等宽**网格（用户 2026-10-16：「文昌、灾煞、贵人那一列往左挪一点好，看着中间有些宽」）。
   原来用 repeat(5, auto) + space-between：列宽按各列**最宽的一格**算 —— 第 3 列被「贵人 -卯巳」（2 字地支）
   撑到 calc(130 * var(--rp))，而「文昌 -卯」「灾煞 -酉」只有 1 字地支（calc(102 * var(--rp))）⇒ 那列右侧空出一大块，中间看着松。
   改等宽后列左缘均匀（每列 calc(127.6 * var(--rp))），第 3/4/5 列分别左移约 17 / 31 / 33px（375 基准）。
   ⚠️ 宽度账（rpx，字号 28）：最宽的一格「贵人 -卯巳」＝ 56(名 2em) ＋ 8(– 两侧 4+4) ＋ 6(– 字形) ＋ 56(卯巳)
      ＝ 126 ≤ 127.6 ✓ ——「–」两侧若仍用 calc(6 * var(--rp)) 就是 130 ＞ 127.6，会溢出 calc(2.4 * var(--rp)) 碰到右列，故收到 calc(4 * var(--rp))。 */
.bd-ss {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-row-gap: calc(10 * var(--rp));
  margin-top: calc(20 * var(--rp));
  font-size: calc(28 * var(--rp)); color: var(--ink-2, #6d6459);
}
.bd-sst { display: flex; align-items: baseline; white-space: nowrap; }
.bd-ssn { min-width: 2em; }
.bd-ssd { margin: 0 calc(4 * var(--rp)); font-size: calc(20 * var(--rp)); color: var(--ink-3, #a2988b); line-height: 1; }

/* 月建日辰 · 旬空：落在本卦列 / 变卦列，各按「【」的字形 ink 偏移补左缩进 */
.bd-rj {
  display: grid;
  grid-template-columns: calc(60 * var(--rp)) calc(92 * var(--rp)) minmax(0, 1fr) calc(52 * var(--rp)) minmax(0, 1fr);
  margin-top: calc(22 * var(--rp));
}
/* 月建日辰 · 旬空：24 → calc(26 * var(--rp))（2026-10-18 用户：「日月和旬空加大」）。
   ⚠️ 宽度账：本卦列 calc(217 * var(--rp))，「【丙午月 乙巳日】」≈ 8.8em ⇒ calc(26 * var(--rp)) 时 calc(229 * var(--rp))，从列左缘 +calc(10 * var(--rp)) 起
      会探进中列（calc(52 * var(--rp)) 宽，这一行是空的）约 calc(22 * var(--rp))，碰不到旬空；旬空「【旬空：寅卯】」≈ 7.2em
      ⇒ calc(187 * var(--rp))，+calc(31 * var(--rp)) 缩进 ＝ calc(218 * var(--rp))，越过列右缘 calc(1 * var(--rp)) 仍在卡片内边距（calc(24 * var(--rp))）内。
      **再大就会撞上旬空或越出卡片** —— 这是这一行能到的上限。 */
.bd-rji { font-size: calc(26 * var(--rp)); font-weight: 600; color: var(--accent, #9c5a2c); letter-spacing: calc(1 * var(--rp)); white-space: nowrap; }
.bd-rjmain { grid-column: 3; padding-left: calc(10 * var(--rp)); }
.bd-rjsub { grid-column: 5; padding-left: calc(30 * var(--rp)); }   /* 31 → calc(30 * var(--rp))：calc(26 * var(--rp)) 时末字会顶到内容右界（导出图同锚点） */

/* 表头与六爻行共用同一套栅格 */
.bd-head, .bd-row {
  display: grid;
  grid-template-columns: calc(60 * var(--rp)) calc(92 * var(--rp)) minmax(0, 1fr) calc(52 * var(--rp)) minmax(0, 1fr);
}
.bd-head { align-items: end; padding: calc(24 * var(--rp)) 0 calc(12 * var(--rp)); font-size: calc(20 * var(--rp)); color: var(--ink-3, #a2988b); letter-spacing: calc(1 * var(--rp)); }
.bd-row { align-items: center; padding: calc(11 * var(--rp)) 0; border-bottom: calc(1 * var(--rp)) solid var(--line-2, #f2eee7); }
.bd-row:last-child { border-bottom: none; }

/* 六神列（表头 ＋ 数据行共用同一套）：20 → calc(24 * var(--rp))（2026-10-16 用户：「六神内容字体要改大」，
   以及「六神和藏伏这四个字加大一点」—— 表头「六神」也在这条规则上）。
   ⚠️ 列宽只有 calc(60 * var(--rp))：2 字 @calc(24 * var(--rp)) ＝ calc(48 * var(--rp))，加 padding-right calc(16 * var(--rp)) ＝ calc(64 * var(--rp)) ⇒ 右对齐下文字左缘
      比列左缘多探出 calc(4 * var(--rp))（2px），落在卡片内边距（calc(24 * var(--rp))）里，不截断、右缘锚点不动（导出图同锚点）。
      **必须 white-space: nowrap** —— 不加的话这 2 个字会在 calc(44 * var(--rp)) 的可用宽里折成两行（屏幕上「白虎」
      变成竖排、canvas 导出图仍是横排 ⇒ 屏幕≠导出图，实测已踩过）。
      列宽**不能再加**：本卦／变卦两列（1fr）各只有 calc(217 * var(--rp))，本卦列内容已占 calc(201 * var(--rp))。 */
/* 六神列（表头 ＋ 数据行共用这套基础档）：20 → calc(24 * var(--rp))（2026-10-16）。
   2026-10-18 用户「六神的字体加大，用黑色」⇒ **只加大数据行**（青龙／白虎…）到 calc(28 * var(--rp))、改墨色；
   表头「六神」两个字仍是 calc(24 * var(--rp)) 灰 —— 它与「藏伏」的底线对齐靠「同档字号 ＋ 同行高」做出来
   （.bd-head 是 align-items: end），拆成不同档基线就差 0.8px，会被一眼看出来。
   ⚠️ 数据行 calc(28 * var(--rp)) 的宽度账：2 字 ≈ calc(57.7 * var(--rp))，加 padding-right calc(16 * var(--rp)) ＝ calc(73.7 * var(--rp)) ⇒ 右对齐下文字左缘
      比列左缘（calc(60 * var(--rp)) 宽）多探出约 calc(14 * var(--rp))（7px），落在卡片内边距（calc(24 * var(--rp))）里，不截断、右缘锚点不动
      （导出图同锚点）。**必须 white-space: nowrap** —— 不加这 2 个字会折成两行（屏幕上「白虎」变竖排、
      canvas 导出图仍是横排 ⇒ 屏幕≠导出图，实测已踩过）。
      列宽**不能再加**：本卦／变卦两列（1fr）各只有 calc(217 * var(--rp))，本卦列内容已占 calc(201 * var(--rp))。 */
.bd-cshen { font-size: calc(24 * var(--rp)); color: var(--ink-2, #6d6459); text-align: right; padding-right: calc(16 * var(--rp)); white-space: nowrap; }
.bd-row .bd-cshen { font-size: calc(28 * var(--rp)); color: var(--ink, #2b2621); }
.bd-head .bd-cshen { color: var(--ink-3, #a2988b); }
/* 藏伏列：**数据行内容**仍是 calc(20 * var(--rp))（line-height 1.25 也是给数据行钉的）；表头「藏伏」两个字
   单独加大到 calc(24 * var(--rp))（用户 2026-10-16，与表头「六神」同档）。列宽 calc(92 * var(--rp))：2 字 ＋ 字距 calc(3 * var(--rp)) ＝ calc(51 * var(--rp))，放得下。
   ⚠️ 表头这一档必须**显式 line-height: 1.6**（＝ .bd-cshen 的行高）：.bd-head 是 align-items: end，
      行盒不同 ⇒ 底部对齐时两个标签的**基线会差 2px**（用户 2026-10-16 直接看出来「六神和藏伏没对齐」）。
      导出图侧对应 lh(FS_HFU)（不带 LH_FU）。 */
.bd-cfu { font-size: calc(20 * var(--rp)); color: var(--ink-3, #a2988b); line-height: 1.25; white-space: nowrap; letter-spacing: calc(3 * var(--rp)); }
.bd-head .bd-cfu { font-size: calc(24 * var(--rp)); line-height: 1.6; }

.bd-chalf { display: flex; align-items: center; }
.bd-chalf.bd-biancol { justify-content: flex-start; }

.bd-cmid { display: flex; align-items: center; padding: 0 calc(4 * var(--rp)); }
.bd-sy { font-size: calc(20 * var(--rp)); color: var(--accent, #9c5a2c); margin-left: calc(-16 * var(--rp)); margin-right: auto; }
.bd-mkg { display: flex; align-items: center; margin-left: auto; margin-right: calc(2 * var(--rp)); }
.bd-mk { font-size: calc(22 * var(--rp)); color: var(--accent, #9c5a2c); margin-left: calc(-12 * var(--rp)); }
.bd-arw { font-size: calc(18 * var(--rp)); color: var(--accent, #9c5a2c); line-height: 1; }

/* ⚠️ 本卦列：文字与爻线必须**左对齐**，且左缩进与表头题块**同一个值**（calc(24 * var(--rp))）。
   曾经是「右对齐到列右缘」：文字左缘 = 列右缘 − 8 − 内容宽，而内容宽取决于字体实际渲染
   （不同设备/N 倍屏不一致，实测 390 宽设备上文字比设计稿窄 2px）⇒ 题块（固定 padding）
   与下方文字就差出 7.5px，用户看到的就是「主卦卦名没对齐下方的字」。
   左对齐 + 同 padding 与字体无关，任何设备都齐。
   连带：爻线右端不再贴列右缘（本列右侧留白约 calc(15 * var(--rp))），这是拿到「左缘必齐」的代价 ——
   题块宽度 calc(177 * var(--rp)) 未变，仍与「六亲块 ＋ 间隙 ＋ 爻线」相近。 */
.bd-chalf.bd-bencol { justify-content: flex-start; padding-left: calc(24 * var(--rp)); }

/* 六亲文本：4 字块 calc(132 * var(--rp))（＝设计稿 66px） */
.bd-qin { font-size: calc(28 * var(--rp)); font-weight: 600; color: var(--ink, #2b2621); white-space: nowrap; letter-spacing: calc(5 * var(--rp)); }
/* 变卦的六亲与主卦同色同字重（用户 2026-10-18：「变卦的颜色不要浅色，改成跟主卦一样的颜色和字体」）。
   原来这里是 .bd-qin.bd-dim（ink-2 ＋ font-weight 400），屏幕上发灰、且比主卦细一档；
   导出图 gua-image.js 同侧也一并改为 INK ＋ bold，两侧必须保持同一档。 */


/* 题块（宫位 ＋ 卦名，可带六冲／六合标注） */
.bd-headname { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.bd-nm { display: flex; flex-direction: column; align-items: flex-start; }
.bd-p { font-size: calc(20 * var(--rp)); color: var(--ink-3, #a2988b); letter-spacing: calc(3 * var(--rp)); }
.bd-nrow { display: flex; align-items: baseline; margin-top: calc(4 * var(--rp)); }
.bd-n { font-size: calc(30 * var(--rp)); font-weight: 600; color: var(--ink, #2b2621); white-space: nowrap; letter-spacing: calc(3 * var(--rp)); }
/* 3 字卦名撑到与 4 字同宽：3×(30+14) ＝ 4×(30+3) ＝ calc(132 * var(--rp)) */
.bd-n.bd-n3 { letter-spacing: calc(14 * var(--rp)); }
.bd-n.bd-quiet { color: var(--ink-3, #a2988b); font-weight: 400; }
.bd-hc { margin-left: calc(8 * var(--rp)); font-size: calc(18 * var(--rp)); font-weight: 600; color: var(--accent, #9c5a2c); letter-spacing: calc(1 * var(--rp)); white-space: nowrap; }
/* 题块左缘 ＝ 下方六亲块左缘（本卦 calc(24 * var(--rp))；变卦侧＝爻线 39 ＋ 间隙 6 ＝ calc(45 * var(--rp))）
   ⚠️ 光写 padding-left 不够：容器同时挂着 .bd-chalf.bd-bencol（justify-content: flex-end，权重更高），
      题块会被推成「右对齐」—— 题块越宽（带六冲／六合时宽 calc(46 * var(--rp))）左缘越往左跑，与下方六亲文字对不上。
      这里用更高权重的规则按死左对齐，并把题块宽度钉成与六亲块一致。 */
.bd-head .bd-chalf.bd-headname {
  justify-content: flex-start;
  align-items: flex-start;
  padding-right: 0;
}
.bd-head .bd-nm { width: calc(177 * var(--rp)); }        /* ＝六亲块 132 ＋ 间隙 6 ＋ 爻线 39 */
.bd-headname.bd-hs { /* 左缩进由 .bd-chalf.bd-bencol 提供（＝数据行的同一个 calc(24 * var(--rp))），此处不再重复
                         —— 表头与数据行同源，左缘才不可能漂 */ }
.bd-headname.bd-hb { padding-left: calc(45 * var(--rp)); }   /* 变卦侧＝爻线 calc(39 * var(--rp)) ＋ 间隙 calc(6 * var(--rp))（该列内容在左侧） */

/* 爻线：整线 calc(39 * var(--rp)) ／ 断线各 calc(16 * var(--rp))；尺寸写死，不依赖 flex 拉伸与百分比 */
.bd-yao { display: flex; flex-direction: column; width: calc(39 * var(--rp)); flex: 0 0 calc(39 * var(--rp)); }
/* 间隙只加在「爻线与六亲文字」之间：本卦列文字在左 ⇒ 加左侧；变卦列文字在右 ⇒ 加右侧 */
.bd-chalf.bd-bencol .bd-yao { margin-left: calc(6 * var(--rp)); }
.bd-chalf.bd-biancol .bd-yao { margin-right: calc(6 * var(--rp)); }
.bd-yl { display: flex; justify-content: space-between; width: calc(39 * var(--rp)); height: calc(6 * var(--rp)); }
.bd-seg { height: calc(6 * var(--rp)); background: var(--ink, #2b2621); border-radius: calc(4 * var(--rp)); }
.bd-seg.bd-full { width: calc(39 * var(--rp)); }
.bd-seg.bd-half { width: calc(16 * var(--rp)); }
.bd-yao.bd-moving .bd-seg { background: var(--accent, #9c5a2c); }