/* board.web.css —— 卦纸（排盘纸）的**网页版补充样式**（手写，不会被 _dev/rpx2css.cjs 覆盖）
 *
 * 定位：web/css/board.css 是从 miniprogram/components/board/board.wxss 自动生成的，
 *       已经把尺寸/颜色/间距按 rpx → calc(N * var(--rp)) 原样搬过来（375px 下与小程序逐像素同口径）。
 *       这里**只补**「浏览器与小程序 WebView 不一样」的几处；要改视觉先改小程序 wxss，再重跑生成脚本。
 *
 * 本例里唯一真正的差异是「编辑态的输入框」：
 *   小程序用的是 <textarea> 组件（auto-height、placeholder-class、无边框、块级），
 *   浏览器里是原生 <textarea>（inline-block、Chrome 默认 2px 内边距、有滚动条、placeholder 伪元素）。
 *   盒模型（padding/margin/边框/行高/字距）已由 board.css 的 .bd-qedit 钉死，这里补齐剩下的。
 * ⚠️ 尺寸口径不在这里重复写死：字号/字距**必须**与 .bd-qt 一致，所以仍按 calc(N * var(--rp)) 写。
 */

/* ---------- 编辑态输入框（点问事行就地改时出现的那一行） ---------- */
.bd-qedit {
  /* 浏览器里 textarea 是 inline-block：与外层 .bd-ask（align-items: baseline）一起会多出一段基线偏移，
     写得像文字一样地「块级 + 无额外行盒」才不会把「问」字挤歪。小程序侧本身就是块级组件。 */
  display: block;
  width: 100%;
  overflow: hidden;              /* 高度由 board.js 的 autoGrow 撑（对应小程序 auto-height），不要出现滚动条 */
  font-family: inherit;          /* web.css 已设；这里再钉一次，避免字号口径回落到等宽默认字体 */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  caret-color: var(--ink, #2b2621);
  color: var(--ink, #2b2621);
  /* 手机上点进输入框时浏览器会自己放大/平移页面，这里禁掉（小程序没有这个行为） */
  touch-action: manipulation;
  /* ⚠️ 基线下移补偿（实测值）：Chrome 给 <textarea> 里的首行定位与普通块级文字**不同** ——
     表里那行字（.bd-qt 的 span）在 line-height 1.6 的行盒里垂直居中（half-leading 1.95px），
     而 textarea 的首行直接贴内容盒顶 ⇒ 实测文字比显示态**高 2.5px**（375 口径截图逐像素量过：
     显示态墨迹 y 350..376、编辑态 386..412，而下方神煞锚点两图相同 ⇒ 只有这一行字上跳）。
     用 position: relative 的 top 把它压回去：**不参与布局**，所以行高与下方所有内容都不动
     （padding-top 会把行盒撑高 2.5px，把整张卦纸往下推，不能用）。 */
  position: relative;
  top: calc(5 * var(--rp));
}

/* 小程序的 placeholder-class="bd-qph"（28rpx / ink-3 / 字距 1rpx）：网页版用伪元素对齐同一口径。
   opacity 必须写 1 —— Firefox 默认把 placeholder 调成半透明，会比小程序的实色浅一档。 */
.bd-qedit::placeholder {
  font-size: calc(28 * var(--rp));
  color: var(--ink-3, #a2988b);
  letter-spacing: calc(1 * var(--rp));
  opacity: 1;
}

/* 编辑态下问事行不再提示可点（此时点的是输入框），把光标提示收掉 ——
   只在「可编辑」的卦纸（详情页）上生效，排盘页读到的是默认光标 */
[data-bd-editable] .bd-ask:not(.bd-tapable) { cursor: text; }

/* ---------- 显示态：点问事行可改时的光标 ---------- */
/* .bd-tapable 的 cursor: pointer 来自 board.css；这里只补手机端点击高亮（浏览器默认会闪一层灰） */
.bd-tapable { -webkit-tap-highlight-color: transparent; }

/* ---------- 六爻表：格子里的文字一律不可选中 ---------- */
/* 小程序里 <view>/<text> 的内容选不中；浏览器默认可以拖选，指着「世」「→」这类小字时
   会变成 I 形光标、还能拖出一片蓝 —— 视觉上不干净。只影响交互，不动任何盒模型。 */
.board {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* 编辑框例外：里面要能正常选字/放光标 */
.board .bd-qedit {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}