/* 问书台（帮助家族：常见问题 / 帮助文档 / 制作规范）自己的版式与物件。

   逐条取自 Claude r3 `demos/rooms/reading.css`（r4 从 r3/reading.html 的 <style>
   抽出）；class 名、数值、层次都不改，只做三类改写：

     1. 位图路径改到产品资产：demos/house/walnut.webp → assets/house/walnut.webp，
        demos/decor/foxing.png、paper-night.webp → assets/decor/…（本文件在
        styles/pages/ 下，所以前缀是 ../../assets/）。
     2. 分类书签与目录行在 r3 是 <a href="#cat=…">，本产品不新增路由，改成
        <button type="button">（见 js/views/help.js）；对应规则把 .h-ask-toc__btn
        与 .h-ask-ribbon 一并写进来，并补上按钮的默认样式复位。
     3. 补一块 r3 没有的东西：书内翻页的纸页 .h-ask-turn（js/views/book-turn.js
        建的那一层）。

   加载顺序与设计源一致：tokens → fonts → decor → page-shell → shell → 本文件。
   设计源第一行 `html { overflow-x: clip; }`（给门楣暗锁刻度环兜底）没有搬：
   那条是整页的全局规则，本产品由 shell 与 page-shell 负责横向溢出，页面样式
   不该替整站兜底。
   ------------------------------------------------------------------------- */

/* ---------- 题头：编号小标、大字标题、中线铜线、导语 ---------- */
.h-ask-head { padding: var(--pm-s-7) 0 var(--pm-s-6); text-align: center; display: grid; justify-items: center; }
.h-ask-head .pm-lede { max-width: 30em; }

/* ---------- 房间：两面书墙夹一座读经台 ---------- */
.h-ask-room { display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; gap: var(--pm-s-6); align-items: start; padding-bottom: var(--pm-s-9); }

/* ---- 书墙：每层一块胡桃木隔板，书脊由脚本按固定种子排出（纯装饰，aria-hidden） ----

   质感分四层（都不动 DOM，只用伪元素与背景层）：
     1. 洞的纵深：每层 .h-ask-shelf 内壁铺胡桃木纹，顶上一道压下来的暗，
        洞底留一条极细的反光；层与层之间是一道 1px 铜线。
     2. 书脊：左侧 1.5px 背脊高光带 + 右侧暗缝（换气缝），书头书脚各 1px 暗线，
        书脚在隔板上落一小片影；相邻书脊之间的 1px 缝露出洞里的黑。
     3. 顶光：书架前缘上方一层低透明度烛光径向渐变（.h-ask-case::before），
        只照前缘，不铺满屏；静止渐变，不做动画，减少动效时也不会闪。
     4. 铜件：两侧立柱各一条窄铜条 + 一排铆点（.h-ask-case::after，纯背景层）。 */
.h-ask-case { position: relative; padding: 10px 10px 0; border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, rgb(0 0 0 / .45), rgb(0 0 0 / .15) 12%, rgb(0 0 0 / .15) 88%, rgb(0 0 0 / .45)), url("../../assets/house/walnut.webp") 0 0 / 512px 512px, #2A1C12;
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / .4), var(--pm-light-x) 20px 30px -16px rgb(0 0 0 / .8); }
/* 顶光：只落在书架前缘（上沿 56px），越往下越淡；静止，不闪 */
.h-ask-case::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 56px; z-index: 1; pointer-events: none; border-radius: 4px 4px 0 0;
  background: radial-gradient(ellipse 78% 130% at 50% -22%, rgb(var(--h-candle) / .2), rgb(var(--h-candle) / .07) 46%, transparent 74%); }
/* 铜件：两道立柱铜条 + 每 26px 一颗铆点，都画在同一层背景上，不加节点 */
.h-ask-case::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 4px 4px 0 0;
  background:
    radial-gradient(circle 1.6px at 2.5px 9px, #F6E6B4 0 .9px, var(--pm-brass-hi) .9px 1.5px, rgb(0 0 0 / .45) 1.5px 2.2px, transparent 2.4px) 0 0 / 5px 26px repeat-y,
    radial-gradient(circle 1.6px at 2.5px 9px, #F6E6B4 0 .9px, var(--pm-brass-hi) .9px 1.5px, rgb(0 0 0 / .45) 1.5px 2.2px, transparent 2.4px) 100% 0 / 5px 26px repeat-y,
    linear-gradient(90deg,
      rgb(94 69 32 / .95) 0 1px, #E2C78A 1px 2.5px, #8A6C3A 2.5px 4px, rgb(94 69 32 / .75) 4px 5px, transparent 5px calc(100% - 5px),
      rgb(94 69 32 / .75) calc(100% - 5px) calc(100% - 4px), #8A6C3A calc(100% - 4px) calc(100% - 2.5px), #E2C78A calc(100% - 2.5px) calc(100% - 1px), rgb(94 69 32 / .95) calc(100% - 1px)); }
.h-ask-shelf { position: relative; display: flex; align-items: flex-end; gap: 1px; height: 128px; padding: 0 6px; margin-bottom: 0; overflow: hidden;
  background: linear-gradient(180deg, rgb(0 0 0 / .8) 0, rgb(0 0 0 / .58) 22%, rgb(0 0 0 / .34) 62%, rgb(0 0 0 / .44) 100%),
              url("../../assets/house/walnut.webp") 0 2px / 512px 512px, #2A1C12;
  border-bottom: 12px solid #3A2818;
  box-shadow: inset 0 16px 20px -8px rgb(0 0 0 / .9),          /* 顶板压下来的暗：洞顶最深 */
              inset 0 -1px 0 rgb(211 180 116 / .14),            /* 洞底一道极细反光 */
              inset 7px 0 12px -10px rgb(0 0 0 / .95), inset -7px 0 12px -10px rgb(0 0 0 / .95),   /* 两个侧壁 */
              0 1px 0 var(--pm-brass), 0 2px 0 rgb(0 0 0 / .5),   /* 层与层之间那条 1px 铜线 */
              0 6px 8px -2px rgb(0 0 0 / .6); }
.h-ask-book { flex: none; border-radius: 2px 2px 0 0; position: relative;
  background:
    /* 书头、书脚各一道烫金（r3 原样） */
    linear-gradient(180deg, transparent 0 10%, rgb(211 180 116 / .5) 10% 11.5%, transparent 11.5% 84%, rgb(211 180 116 / .45) 84% 85.5%, transparent 85.5%),
    /* 背脊：左侧 1.5px 高光带，紧跟 1px 暗缝，右侧再收一道暗边（相邻书脊之间靠它分开） */
    linear-gradient(90deg, rgb(255 246 222 / .26) 0 1.5px, rgb(255 246 222 / .08) 1.5px 3px, rgb(0 0 0 / .2) 3px 3.5px,
      transparent 3.5px 68%, rgb(255 255 255 / .06) 78% 82%, rgb(0 0 0 / .55) calc(100% - 1.5px)),
    /* 圆柱感 */
    linear-gradient(90deg, rgb(0 0 0 / .35), rgb(255 255 255 / .1) 30%, rgb(0 0 0 / .1) 60%, rgb(0 0 0 / .4)), var(--c);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 1px 0 0 rgb(255 246 222 / .22), inset -1px 0 0 rgb(0 0 0 / .45),
              0 3px 4px -2px rgb(0 0 0 / .75); }   /* 书脚在隔板上落的一小片影 */
/* 书头、书脚各 1px 暗线：让书脊有"顶"和"底"，不变成一条色块 */
.h-ask-book::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(0 0 0 / .5); }
.h-ask-book::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgb(0 0 0 / .7); }
.h-ask-book[data-lean] { transform: rotate(-7deg); transform-origin: 0 100%; margin-left: 6px; }
/* 左书墙靠灯近，亮一点；右书墙远，暗一点（光源一致：左上） */
.h-ask-case--r { filter: brightness(.82); }

/* ---------- 读经台与书 ---------- */
.h-ask-stand { position: relative; padding-top: 30px; }
.h-ask-lectern.h-lectern { padding: 22px 22px 70px; }
.h-ask-book-open { position: relative; display: grid; grid-template-columns: 1fr 1fr; color: var(--pm-ink); border-radius: 3px;
  --pm-on-scene: var(--pm-ink); --pm-on-scene-2: var(--pm-ink-2); --pm-accent: var(--h-accent-ink);
  background:
    radial-gradient(ellipse 45% 60% at 8% 0%, rgb(var(--h-candle) / .32), transparent 70%),             /* 烛光落在左页 */
    linear-gradient(90deg, rgb(110 76 30 / .0) 0 46%, rgb(110 76 30 / .28) 49.4%, rgb(40 26 8 / .45) 50%, rgb(110 76 30 / .28) 50.6%, rgb(110 76 30 / 0) 54%),   /* 书沟 */
    linear-gradient(90deg, rgb(110 76 30 / .22), transparent 6%, transparent 94%, rgb(110 76 30 / .22)),  /* 两侧页边厚度 */
    url("../../assets/decor/foxing.png") 0 0 / 100% 100%, url("../../assets/decor/paper-night.webp") 0 0 / 512px 512px, var(--h-vellum);
  box-shadow: 0 0 0 1px rgb(110 76 30 / .55), 0 3px 0 -1px #D9CCAE, 0 6px 0 -2px #CDBE9C, 0 9px 0 -3px #BFAE88, 0 22px 30px -12px rgb(0 0 0 / .85); }
.h-ask-page { padding: 34px 38px 40px; min-width: 0; }
.h-ask-more a, .h-ask-q__a a { color: var(--pm-link); }   /* 书页里的链接：墨青，不用墙上的金 */
.h-ask-book-open mark { background: rgb(201 168 102 / .35); color: inherit; padding: 0 1px; border-radius: 2px; }
.h-ask-empty { color: var(--pm-ink-2); font-family: var(--pm-font-serif); padding: 14px 0; }
.h-ask-page--l { padding-top: 136px; }   /* 给垂下来的丝带留出位置 */

/* ---- 丝带书签：分类。从书顶的堵头布下垂到左页；当前一条更长、更亮 ----

   竖排只排得下一列字，所以丝带上只放 2–3 字短标签（js/views/help.js 的
   RIBBON_LABELS），全名在 aria-label / title 里。宽度 --ribbon-w 跟着
   短标签调到 34px（3 字时字列仍居中，不再挤在 32px 里贴边）；
   行高 = 丝带宽，字才落在正中一列。 */
.h-ask-book-open > nav { position: absolute; left: 0; top: 0; z-index: 2; }   /* 丝带不占书页的网格格子 */
.h-ask-ribbons { --ribbon-w: 34px; position: absolute; left: 30px; top: -10px; display: flex; gap: 7px; z-index: 2; margin: 0; padding: 0; list-style: none; }
/* 按钮版的丝带：把 <button> 的默认边框、内边距、居中方式复位成 r3 的 <a> */
.h-ask-ribbon { --len: 104px; display: block; width: var(--ribbon-w, 34px); height: var(--len); margin: 0; padding: 20px 0 0; border: 0; cursor: pointer; white-space: nowrap;
  -webkit-appearance: none; appearance: none; text-align: center;
  color: #F4ECDA; font: 600 13px var(--pm-font-serif); line-height: var(--ribbon-w, 34px);   /* 竖排：行高 = 丝带宽，字落在正中一列 */ letter-spacing: .08em; writing-mode: vertical-rl;
  text-shadow: 0 1px 1px rgb(0 0 0 / .45);
  background: linear-gradient(90deg, rgb(0 0 0 / .25), rgb(255 255 255 / .14) 35%, rgb(255 255 255 / .04) 55%, rgb(0 0 0 / .3)), var(--c);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 11px), 0 100%);
  filter: drop-shadow(1px 4px 3px rgb(40 26 8 / .45)); transition: height 220ms var(--pm-ease-out), filter 220ms; }
.h-ask-ribbon:hover { --len: 114px; }
.h-ask-ribbon[aria-selected="true"] { --len: 128px; filter: drop-shadow(1px 6px 4px rgb(40 26 8 / .55)) brightness(1.12); }   /* 页签选中态：aria-selected，不是 aria-current（那份留给顶栏的当前页） */
.h-ask-ribbon:focus-visible { outline: none; filter: drop-shadow(0 0 0 #E8C878) drop-shadow(0 0 3px #E8C878) brightness(1.15); }
/* 丝带顶端被堵头布压住的一截（一道深色横条，像缝在书脊里） */
.h-ask-ribbons::before { content: ""; position: absolute; left: -10px; right: -10px; top: 0; height: 10px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #6E2E22 0 3px, #D3B474 3px 5px, #2C4662 5px 8px); box-shadow: 0 2px 3px rgb(0 0 0 / .4); z-index: 1; }

/* ---- 放大镜凹槽：搜索 ---- */
.h-ask-search { display: grid; gap: 6px; }
.h-ask-search label { font: 600 12px/1 var(--pm-font-sans); letter-spacing: .14em; color: var(--pm-ink-2); }
.h-ask-search__well { position: relative; }
.h-ask-search__well .pm-input { width: 100%; height: 46px; padding-left: 52px; font-size: 15px; border-radius: 23px; }
.h-ask-lens { position: absolute; left: 7px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 36%, rgb(255 255 255 / .85), rgb(200 230 235 / .35) 30%, rgb(120 160 170 / .25) 60%, transparent 62%),
              radial-gradient(circle, transparent 0 58%, #6E5428 59%, #E2C78A 66%, #8A6C3A 76%, transparent 78%);
  box-shadow: 1px 2px 3px rgb(40 26 8 / .35); }
.h-ask-lens::after { content: ""; position: absolute; right: -6px; bottom: -4px; width: 12px; height: 4px; border-radius: 2px; background: linear-gradient(180deg, #E2C78A, #6E5428); transform: rotate(45deg); }

/* ---- 目录：分类行，点线引到条数 ---- */
.h-ask-toc { margin: 28px 0 0; padding: 0; list-style: none; }
.h-ask-toc__h { font: 600 12px/1 var(--pm-font-sans); letter-spacing: .14em; color: var(--pm-ink-2); margin: 0 0 6px; }
.h-ask-toc a, .h-ask-toc__btn { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; width: 100%; margin: 0; padding: 8px 2px;
  border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--pm-ink); text-decoration: none; font-family: var(--pm-font-serif); font-size: 1rem; }
.h-ask-toc a::after { content: ""; }
.h-ask-toc__name { display: flex; gap: 8px; min-width: 0; }
.h-ask-toc__lead { border-bottom: 1px dotted rgb(85 74 62 / .55); transform: translateY(-4px); }
.h-ask-toc__name .h-ask-toc__lead { flex: 1; }
.h-ask-toc__n { font: 13px var(--pm-font-mono); color: var(--pm-ink-2); }
.h-ask-toc__roman { font: 600 12px var(--pm-font-serif); color: var(--h-accent-ink); min-width: 3.2em; white-space: nowrap; }
.h-ask-toc a:hover .h-ask-toc__lead, .h-ask-toc__btn:hover .h-ask-toc__lead { border-bottom-color: var(--h-accent-ink); }
/* 目录行的选中态是按钮开关态（aria-pressed），不是 aria-current：一份文档里
   aria-current="page" 只能有一个（顶栏那一项）。 */
.h-ask-toc a[aria-pressed="true"], .h-ask-toc__btn[aria-pressed="true"] { color: var(--h-accent-ink); }
.h-ask-toc a[aria-pressed="true"] .h-ask-toc__roman::before,
.h-ask-toc__btn[aria-pressed="true"] .h-ask-toc__roman::before { content: "▸"; margin-right: 2px; }
.h-ask-toc a:focus-visible, .h-ask-toc__btn:focus-visible { outline: 2px solid #A8894F; outline-offset: 2px; border-radius: 2px; }
.h-ask-more { margin-top: 26px; font-size: var(--pm-fs-sm); color: var(--pm-ink-2); line-height: 1.7; }

/* ---- 右页：卷次问答（三个视图共用这一副骨架，只是折叠面里填的东西不同） ---- */
.h-ask-chapter { display: flex; align-items: baseline; gap: 14px; margin: 0 0 6px; }
.h-ask-chapter__no { font: 600 13px var(--pm-font-serif); letter-spacing: .2em; color: var(--h-accent-ink); }
.h-ask-chapter h2 { margin: 0; font-family: var(--pm-font-serif); font-size: 1.625rem; }
.h-ask-chapter + p { color: var(--pm-ink-2); font-family: var(--pm-font-serif); margin: 0 0 18px; }
.h-ask-q { border-top: 1px solid rgb(120 92 48 / .28); }
.h-ask-q:last-of-type { border-bottom: 1px solid rgb(120 92 48 / .28); }
.h-ask-q summary { list-style: none; display: grid; grid-template-columns: 2em 1fr 18px; gap: 6px; align-items: baseline; padding: 13px 2px; cursor: pointer;
  font-family: var(--pm-font-serif); font-weight: 600; font-size: 1.0625rem; line-height: 1.5; }
.h-ask-q summary::-webkit-details-marker { display: none; }
.h-ask-q__no { font: 600 12px var(--pm-font-serif); color: var(--h-accent-ink); }
/* 展开标记：一片小铜叶，展开时转向下方 */
.h-ask-q__leaf { width: 10px; height: 10px; justify-self: end; align-self: center; border-radius: 0 60% 0 60%; transform: rotate(-45deg); transition: transform 200ms var(--pm-ease-out);
  background: linear-gradient(135deg, #E2C78A, #8A6C3A); box-shadow: 0 1px 1px rgb(40 26 8 / .4); }
.h-ask-q[open] .h-ask-q__leaf { transform: rotate(45deg); }
.h-ask-q summary:hover { color: var(--h-accent-ink); }
.h-ask-q summary:focus-visible { outline: 2px solid #A8894F; outline-offset: 2px; border-radius: 2px; }
.h-ask-q__a { margin: 0 0 16px 2em; padding: 2px 0 2px 16px; border-left: 2px solid var(--h-accent-ink); color: var(--pm-ink-2); font-family: var(--pm-font-serif); line-height: 1.85; }
.h-ask-q__a p { margin: 0 0 .6em; }
.h-ask-q__a .h-ask-see { font: 13px var(--pm-font-sans); }

/* ---- 烛台：立在读经台左上角，烛光照向左页 ---- */
.h-ask-candlestick { position: absolute; left: -10px; top: -58px; width: 52px; height: 96px; z-index: 3; pointer-events: none; }
.h-ask-candlestick .h-candle { left: 17px; top: 0; }
.h-ask-candlestick::after { content: ""; position: absolute; left: 4px; right: 4px; top: 68px; height: 10px; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 30%, #F1DDA4, #A8894F 55%, #5E4520); box-shadow: 0 4px 6px rgb(0 0 0 / .55); }
.h-ask-candlestick::before { content: ""; position: absolute; left: 20px; width: 12px; top: 72px; height: 24px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #6E5428, #E2C78A 40%, #6E5428); }

/* ---- 书内翻页：右页那张纸绕书沟转过去（js/views/book-turn.js 建的整层是装饰） ---- */
.h-ask-turn { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  perspective: 2200px; perspective-origin: 50% 50%; }
/* 装订暗槽：纸离开书脊的那一瞬，沟里更暗 */
.h-ask-turn__gutter { position: absolute; left: 50%; top: 0; bottom: 0; width: 20px; margin-left: -10px; opacity: 0;
  background: linear-gradient(90deg, rgb(40 26 8 / 0), rgb(40 26 8 / .5) 34%, rgb(20 12 4 / .7) 50%, rgb(40 26 8 / .5) 66%, rgb(40 26 8 / 0)); }
/* 落页投影：纸盖到左页上时最重 */
.h-ask-turn__shadow { position: absolute; opacity: 0;
  background: linear-gradient(270deg, rgb(20 12 4 / .5), rgb(20 12 4 / .18) 42%, rgb(20 12 4 / 0) 88%); }
/* 纸：绕书脊转，正面是旧页的纸，背面是新页的纸；侧厚 2px 见 __edge */
.h-ask-turn__leaf { position: absolute; transform-origin: left center; transform-style: preserve-3d; will-change: transform;
  border-radius: 0 3px 3px 0; box-shadow: -2px 0 8px rgb(40 26 8 / .4); }
.h-ask-turn__leaf::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px;
  background: linear-gradient(90deg, rgb(40 26 8 / .4), rgb(40 26 8 / 0)); }
.h-ask-turn__face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: inherit;
  background: url("../../assets/decor/foxing.png") 0 0 / 100% 100%, url("../../assets/decor/paper-night.webp") 0 0 / 512px 512px, var(--h-vellum); }
.h-ask-turn__face--front { box-shadow: inset 0 0 18px rgb(110 76 30 / .22); }
.h-ask-turn__face--back { transform: rotateY(180deg); box-shadow: inset 0 0 26px rgb(110 76 30 / .3); }
/* 纸的侧厚：1–2px 的一条边，跟着纸一起转 */
.h-ask-turn__edge { position: absolute; top: 0; right: 0; width: 2px; height: 100%; transform: translateX(100%);
  background: linear-gradient(90deg, #CDBE9C, #BFAE88); }

@media (prefers-reduced-motion: reduce) { .h-ask-ribbon, .h-ask-q__leaf { transition: none; } }

/* 窄屏两档：1100 以下两面书墙退场，760 以下书摊成一页 */
@media (max-width: 1099px) { .h-ask-room { grid-template-columns: minmax(0, 1fr); } .h-ask-case { display: none; } }
@media (max-width: 759px) {
  .h-ask-book-open { grid-template-columns: 1fr; background-image: radial-gradient(ellipse 60% 40% at 8% 0%, rgb(var(--h-candle) / .3), transparent 70%), url("../../assets/decor/foxing.png"), url("../../assets/decor/paper-night.webp"); background-size: 100% 100%, 100% 100%, 512px 512px; }
  .h-ask-page { padding: 24px 20px 28px; } .h-ask-page--l { padding-top: 140px; border-bottom: 1px solid rgb(120 92 48 / .3); }
  /* 窄屏七条丝带仍要一列排开：丝带收到 30px、缝 4px、起点挪到 10px，总宽 246px，短书页也放得下 */
  .h-ask-ribbons { --ribbon-w: 30px; left: 10px; gap: 4px; }
  .h-ask-ribbon { letter-spacing: 0; }
}

/* r4 关闭纹理（?tex=off / html.pm-tex-off）：本房间所有用到位图的面只留底色 */
html.pm-tex-off .h-ask-case,
html.pm-tex-off .h-ask-shelf,
html.pm-tex-off .h-ask-book-open,
html.pm-tex-off .h-ask-turn__face { background-image: none !important; }
/* 洞的内壁去掉木纹后仍要是暗的（上面那条 !important 会把渐变一起清掉） */
html.pm-tex-off .h-ask-shelf { background-color: #2A1C12 !important; }

/* 制作规范：正文是 spec-v2 的条款原文（整段说明、JSON 代码块、表格行都可能是
   一条不断行的长串），只在这一栏目里允许任意断行，别让长段顶破书页；条款里的
   代码块与表格行保留自己的换行（white-space: pre-wrap），不挤成一整行。
   其余栏目（常见问题 / 帮助文档）的排版不动。 */
[data-help-book="spec"] .h-ask-page { max-width: 100%; overflow-wrap: anywhere; }
[data-help-book="spec"] .h-ask-q__a p { white-space: pre-wrap; overflow-wrap: anywhere; }