/* page-detail.web.css —— 记录详情页的网页版补充样式（page-detail.css 由 _dev/rpx2css.cjs 从 wxss 生成，请勿手改）
 *
 * 三处补充：
 *   ① 两个笔记框：小程序是 textarea auto-height（随内容长高），网页里没有 auto-height
 *   ② placeholder-class="note-ph" → 改由 ::placeholder 复刻
 *   ③ 底部操作格的桌面端指针与按下反馈
 */

/* ============ 一、跨页串味（网页版特有，必读） ============
 * 小程序里每页 wxss 只作用于本页；网页版把所有页面的 css 一次挂在同一文档里。本页中了两处：
 *   · page-liuyao.css 的 .card（给摇卦页六列表格收窄内边距的 30/24/26rpx）：会盖掉 app.css 的 32/28/32
 *     → 本页「时间」卡的左右内边距少 4rpx（实测 24rpx 而非 28rpx）。
 *   · page-liuyao.css 的 .note（摇卦页三枚铜钱那张条子）：撞上本页「卦例记录」卡的 .card.note，
 *     把卡片压成 flex 行、高度钉死 130rpx、overflow:hidden —— 症状：标题「卦例记录」竖排、
 *     两个输入框并排、内容被裁。**这是最重的一处**，不修页面直接是坏的。
 *   · page-more.css 的 .hint（margin-top 14rpx ＋ line-height 1.7）会漏到本页的兜底提示上。
 * 修法：模板根上有本页专属类 .p-detail（见 web/js/views/detail.js），按本页口径收回；只影响本页。
 * ⚠️ 以后若又出现「本页某处样式莫名变了」，先查别的 page-*.css 里有没有同名类。 */
.p-detail .card { padding: calc(32 * var(--rp)) calc(28 * var(--rp)); }
.p-detail .card.note {
  display: block;                 /* 期望 block：漏成 flex 就是上面说的那种崩法 */
  height: auto;                   /* 抵消摇卦页写死的 130rpx */
  overflow: visible;              /* 抵消 overflow:hidden 把内容裁掉 */
  margin-top: 0;                  /* 抵消摇卦页的 margin-top 24rpx（本页用 margin-bottom） */
  background: var(--card, #fff);  /* 期望白卡（摇卦页那条是 #fbf9f5 米色） */
}
.p-detail .hint { margin-top: 0; line-height: 1.6; }

/* ============ 二、笔记框（两个 textarea） ============ */

/* ① auto-height 的网页版：field-sizing:content 让 <textarea> 跟着内容长（Chrome/Edge 123+）。
   不支持的浏览器退回模板里的 rows="3" ＋ page-detail.css 的 min-height —— 功能不受影响（框内可滚动）。
   overflow-y:hidden 是因为框已经长到内容那么高，再出滚动条会多一条灰边。 */
.note-ta { display: block; field-sizing: content; overflow-y: hidden; }

/* ② 占位文字：与 page-detail.css 的 .note-ph 同值（26rpx / #bdb5a8） */
.note-ta::placeholder { font-size: calc(26 * var(--rp)); color: #bdb5a8; }
.note-ta::-webkit-input-placeholder { font-size: calc(26 * var(--rp)); color: #bdb5a8; }

/* ③ 保存卦图那个操作格（当前是唯一一格，占满整行） */
.op-btn {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.op-btn:active { background: #fbf9f5; }