/* page-liuyao.web.css —— 摇卦页的**网页版补充样式**（手工维护，不被 _dev/rpx2css.cjs 覆盖）
 *
 * web/css/page-liuyao.css 是从 miniprogram/pages/liuyao/liuyao.wxss 自动生成的，已经直接可用，
 * 这里只补「小程序有、浏览器没有」的那几件事，尺寸一律照 rpx 口径写 calc(N * var(--rp))：
 *   ① 起卦时间的日期／时间 → 原生日历／时钟选择器（小程序是 <picker>，网页没有对应标签）
 *   ② placeholder（小程序用 placeholder-class，网页只能走 ::placeholder）
 *   ③ 问事框的 auto-height（小程序 textarea 自带，浏览器的 textarea 不自增高）
 *   ④ 浏览器表单控件的默认内边距／图片缩放口径（小程序里没有这些默认值）
 *   ⑤ 可点元素的指针与滚动容器细节（电脑上的可用性，不动任何尺寸）
 */

/* ---------- ① 起卦时间：原生 date/time 控件隐身铺在胶囊上 ----------
   小程序是 <picker mode="date/time"> 包一个胶囊；网页版没有 picker，
   于是把胶囊做成 label，里面铺一枚**透明**的原生 date/time 输入框：
   点哪儿＝点原生控件 ⇒ 弹出系统的日历／时钟，而屏幕上看去仍是小程序的赭色文字胶囊。
   ⚠️ 必须 opacity:0（不能用 display:none / visibility:hidden）——否则原生控件收不到点击、不弹选择器；
      也必须 appearance:auto 覆盖 web.css 里的全局 -webkit-appearance:none，否则 Chrome 不弹日历。 */
.etime-v .et-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.etime-v .et-pick .et-txt { line-height: 1.35; }
.etime-v .et-pick .et-in {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: auto;
  appearance: auto;
}
/* 日期输入框在 Chrome 里比时间输入框多一截内部宽度，隐身层不吃布局，无碍 */

/* ---------- ② placeholder（对应 wxml 的 placeholder-class="ask-ph" / "ph"） ---------- */
.ask-i::placeholder {
  font-size: calc(33 * var(--rp));
  color: #c9c1b4;
  letter-spacing: calc(1 * var(--rp));
}
.search .ipt::placeholder {
  font-size: calc(28 * var(--rp));
  color: var(--ink-3);
  letter-spacing: calc(1 * var(--rp));
}

/* ---------- ③ 问事框 auto-height：一行起，最多四行，再长在框内滚动 ----------
   （min-height 53rpx / max-height 205rpx 由生成的 page-liuyao.css 给出） */
.ask-i {
  field-sizing: content;   /* Chrome 123+：高度随内容长，到 max-height 为止 —— 与小程序的 auto-height 同效 */
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------- ④ 浏览器表单控件的默认值归零 ---------- */
/* Chrome 的 input/textarea 默认有 1~2px 内边距，小程序没有；不归零会和设计稿差一两像素 */
.search .ipt { padding: 0; height: 100%; }
/* 硬币图：小程序 <image mode="aspectFit">，网页用 object-fit 对齐 */
.coins .coin { object-fit: contain; }

/* ---------- ⑤ 电脑上的可用性（不动尺寸） ---------- */
/* 手录「没选满」时按钮的置灰：配色照 .btn.dis 重画一份，但类名不叫 dis ——
   dis 会被运行时的点击委托直接吞掉，而这一下在小程序里是要进 castNow 弹
   「请先把六爻逐爻选完」提示的（拦点击在 castNow 里，不在样式上）。 */
.btn.off { background: #d8bc9f; color: #fffaf5; }

.entry-item,
.chip,
.gg,
.slot,
.foot .lk,
.whorow .lk,
.et-now,
.mopt,
.btn { cursor: pointer; }
.mrow.locked .mopt,
.btn.dis,
.foot .lk.off { cursor: default; }

/* 卦名网格：竖向滚动，横向别出滚动条（滚动条的宽度已算进两列 311rpx 的余量里） */
.guagrid { overflow-x: hidden; }

/* ---------- ⑥ 爻线「变粗」的真正原因：跨页类名冲突 ----------
   ⚠️ 历史页的统计条也叫 `.bar`：page-history.css 的
        .bar { padding: 8rpx 4rpx 24rpx }
   网页版把 15 份页面 css 一次性全加载（小程序是每页只加载自己的 wxss，所以那边没这问题），
   这条 padding 就漏到了摇卦／一键起卦／手动指定三处的爻线 `.bar` 上：
   12rpx 的内容高度 ＋ 上下 padding 16px（420 宽下 --rp=0.5）＋ 边框 ⇒ 实测视觉高度 ≈18px，
   而且 .yao.x 的两段各被左右 padding 撑宽 2px ⇒ 看上去就是两块厚方砖。
   修法：只把爻线的 padding 归零，让高度重新由 height 决定；历史页统计条的 `.bar` 不受影响。 */
.yao .bar { padding: 0; }