/* 书前页（2026-09-30）：生成前翻开这一册的扉页。材质页头＋单线字符笔画写出＋目录逐章浮现＋样章纸页。
 * 用现有体系：书封材质（assets/bookshelf）、--display 标题、--sans 正文、--seal 只点章序号。不用水墨、印章。 */
html.bp-locked, html.bp-locked body { overflow: hidden; }

.bp-overlay {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgb(18 17 15 / 0%); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  transition: background .42s ease, backdrop-filter .42s ease, -webkit-backdrop-filter .42s ease;
}
.bp-overlay.is-open { background: rgb(18 17 15 / 62%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bp-overlay.is-leaving, .bp-overlay.is-sealed { background: rgb(18 17 15 / 0%); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }

.bp-sheet {
  position: relative; display: flex; flex-direction: column; width: min(600px, 100%); max-height: min(880px, calc(100vh - 48px));
  overflow: hidden; border-radius: 12px; background: var(--ivory, #f8f8f7); color: var(--near-black, #18181a);
  box-shadow: 0 40px 90px -30px rgb(10 9 8 / 55%), 0 0 0 1px rgb(255 255 255 / 6%);
  opacity: 0; transform: translateY(28px) scale(.985);
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .62s cubic-bezier(.16, 1, .3, 1);
  outline: none;
}
.bp-overlay.is-open .bp-sheet { opacity: 1; transform: none; }
.bp-overlay.is-leaving .bp-sheet { opacity: 0; transform: translateY(18px) scale(.99); transition-duration: .24s; }
/* 确认：整页合上，像把书合拢交出去。 */
.bp-overlay.is-sealed .bp-sheet { opacity: 0; transform: scale(.94); transition-duration: .36s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }

.bp-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* —— 页头：材质铺满，字符居中，册名压在底部 —— */
.bp-hero { position: relative; min-height: 340px; padding: 22px 28px 26px; display: grid; grid-template-rows: auto 1fr auto; color: #f2efe8; background: #1b1a18; isolation: isolate; overflow: hidden; }
.bp-art { position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; transform: scale(1.14); transition: transform 2.6s cubic-bezier(.16, 1, .3, 1); }
.bp-overlay.is-open .bp-art { transform: scale(1); }
.bp-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(18 17 15 / 22%) 0%, rgb(18 17 15 / 0%) 34%, rgb(18 17 15 / 30%) 58%, rgb(18 17 15 / 88%) 100%); }
.bp-sheet.is-relationships .bp-art { background-image: url('/assets/bookshelf/brand-water.webp'); background-position: top left; }
.bp-sheet.is-work .bp-art { background-image: url('/assets/bookshelf/brand-wood.webp'); background-position: bottom right; }
.bp-sheet.is-money .bp-art { background-image: url('/assets/bookshelf/brand-metal.webp'); background-position: top right; }
.bp-sheet.is-study .bp-art { background-image: url('/assets/bookshelf/brand-fire.webp'); background-position: bottom left; }
.bp-sheet.is-personal .bp-art { background-image: linear-gradient(125deg, transparent, rgb(10 15 15 / 60%)), url('/assets/bookshelf/brand-earth.webp'); }
.bp-sheet.is-monthly .bp-art { background-image: linear-gradient(135deg, rgb(73 45 21 / 45%), transparent 65%), url('/assets/bookshelf/brand-water.webp'); }
.bp-sheet.is-annual .bp-art:not([style]) { background-image: url('/assets/bookshelf/brand-fire.webp'); }

.bp-imprint { grid-row: 1; align-self: start; font-family: var(--display); font-size: 12px; letter-spacing: .32em; opacity: .78; }
.bp-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(18 17 15 / 22%); color: #f2efe8; cursor: pointer; }
.bp-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.bp-close:focus-visible, .bp-cancel:focus-visible, .bp-confirm:focus-visible, .bp-derivation summary:focus-visible { outline: 2px solid var(--seal, #9a463f); outline-offset: 3px; }

.bp-mark { grid-row: 2; justify-self: center; align-self: center; width: 104px; height: 104px; display: grid; place-items: center; margin: 14px 0 10px; color: #f2efe8; }
.bp-mark svg { width: 100%; height: 100%; }
.bp-mark img { width: 76%; filter: brightness(0) invert(94%); opacity: 0; transition: opacity 1.2s ease .3s; }
.bp-overlay.is-open .bp-mark img { opacity: .95; }
.bp-mark.is-numeral { width: auto; height: auto; font: 200 64px/1 Georgia, "Times New Roman", serif; letter-spacing: .04em; opacity: 0; transform: translateY(8px); transition: opacity 1s ease .3s, transform 1s cubic-bezier(.16, 1, .3, 1) .3s; }
.bp-overlay.is-open .bp-mark.is-numeral { opacity: .96; transform: none; }
/* 单线字符笔画写出：每段描边 pathLength=1，从 1 走到 0，逐段错开 .16s。 */
.bp-mark svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.bp-overlay.is-open .bp-mark svg > * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(.32s + var(--bp-stroke, 0) * .16s); }

.bp-hero-text { grid-row: 3; display: grid; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .7s ease .5s, transform .8s cubic-bezier(.16, 1, .3, 1) .5s; }
.bp-overlay.is-open .bp-hero-text { opacity: 1; transform: none; }
.bp-for { margin: 0; font-family: var(--sans); font-size: 12.5px; letter-spacing: .08em; color: rgb(242 239 232 / 72%); }
.bp-title { margin: 0; font-family: var(--display); font-size: 30px; font-weight: 500; line-height: 1.3; letter-spacing: .1em; color: #f7f4ee; }
.bp-lede { margin: 2px 0 0; min-height: 1.8em; font-family: var(--sans); font-size: 14px; line-height: 1.8; color: rgb(242 239 232 / 84%); text-wrap: pretty; }

/* —— 正文：纸面 —— */
.bp-body { padding: 8px 28px 28px; }
.bp-loading { margin: 28px 0; font-family: var(--sans); font-size: 13px; color: var(--stone, #6b6a68); }
.bp-kicker { display: flex; align-items: center; gap: 12px; margin: 30px 0 14px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .24em; color: var(--near-black, #18181a); }
.bp-kicker i { flex: 1 1 auto; height: 1px; background: var(--border-soft, #d9d8d6); }
.bp-kicker em { font-style: normal; font-weight: 400; letter-spacing: .12em; color: var(--stone, #6b6a68); }

.bp-group { margin: 18px 0 4px; font-family: var(--sans); font-size: 12px; letter-spacing: .08em; color: var(--stone, #6b6a68); }
.bp-chapters { list-style: none; margin: 0; padding: 0; }
.bp-chapters li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--border-soft, #d9d8d6); }
.bp-chapters li:last-child { border-bottom: 0; }
.bp-sheet.is-filled .bp-chapters li { animation: bp-rise .55s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--bp-order, 0) * .045s); }
.bp-no { font-family: var(--display); font-size: 17px; color: var(--seal, #9a463f); }
.bp-chapter { display: grid; gap: 3px; }
.bp-chapter b { font-family: var(--display); font-size: 16.5px; font-weight: 500; line-height: 1.5; letter-spacing: .03em; }
.bp-chapter small { font-family: var(--sans); font-size: 13px; line-height: 1.7; color: var(--stone, #6b6a68); text-wrap: pretty; }

/* 样章：照阅读页的一节——结论标题、正文、依据一句、推演收起。 */
.bp-sample { animation: bp-rise .6s cubic-bezier(.16, 1, .3, 1) .35s both; }
.bp-page { padding: 22px 22px 18px; border: 1px solid var(--border-soft, #d9d8d6); border-radius: 8px; background: #fff; box-shadow: 0 1px 0 rgb(24 24 26 / 3%); }
.bp-page-chapter { margin: 0 0 8px; font-family: var(--sans); font-size: 12px; letter-spacing: .1em; color: var(--seal, #9a463f); }
.bp-page-heading { margin: 0 0 12px; font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.55; letter-spacing: .02em; text-wrap: pretty; }
.bp-para { margin: 0 0 12px; font-family: var(--sans); font-size: 15px; line-height: 1.9; color: #2b2a28; text-wrap: pretty; }
.bp-para strong { font-weight: 600; color: var(--near-black, #18181a); }
.bp-evidence { margin: 4px 0 10px; font-family: var(--sans); font-size: 13px; line-height: 1.8; color: var(--stone, #6b6a68); }
.bp-evidence span { margin-right: 8px; font-weight: 600; color: var(--olive, #494844); }
.bp-derivation { margin: 0 0 12px; }
.bp-derivation summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-family: var(--sans); font-size: 13px; color: var(--olive, #494844); cursor: pointer; list-style: none; }
.bp-derivation summary::-webkit-details-marker { display: none; }
.bp-derivation summary::after { content: ''; width: 6px; height: 6px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.bp-derivation[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.bp-derivation .bp-open, .bp-derivation[open] .bp-closed { display: none; }
.bp-derivation[open] .bp-open { display: inline; }
.bp-derivation p { margin: 4px 0 0; padding-left: 12px; border-left: 2px solid var(--border-soft, #d9d8d6); font-family: var(--sans); font-size: 14px; line-height: 1.85; color: #3b3a38; }
.bp-note { margin: 10px 2px 0; font-family: var(--sans); font-size: 12px; line-height: 1.7; color: var(--stone, #6b6a68); }

.bp-after { animation: bp-rise .6s cubic-bezier(.16, 1, .3, 1) .45s both; }
.bp-after ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
.bp-after li { display: grid; gap: 4px; align-content: start; }
.bp-after b { font-family: var(--sans); font-size: 14px; font-weight: 600; }
.bp-after small { font-family: var(--sans); font-size: 12.5px; line-height: 1.7; color: var(--stone, #6b6a68); }

/* —— 底栏：价格与确认常驻 —— */
.bp-foot { flex: 0 0 auto; display: grid; gap: 12px; padding: 14px 28px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-soft, #d9d8d6); background: rgb(248 248 247 / 94%); }
.bp-price { margin: 0; font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--stone, #6b6a68); }
.bp-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 10px; }
.bp-cancel, .bp-confirm { min-height: 50px; border-radius: 8px; font-family: var(--sans); font-size: 15px; letter-spacing: .06em; cursor: pointer; }
.bp-cancel { border: 1px solid var(--border, #c9c8c6); background: transparent; color: var(--near-black, #18181a); }
.bp-confirm { border: 0; background: var(--near-black, #18181a); color: #f7f4ee; font-weight: 500; }
@media (hover: hover) { .bp-confirm:hover { background: #2c2b29; } .bp-cancel:hover { background: rgb(24 24 26 / 4%); } }

@keyframes bp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 手机：从底部升起的整页，顶部留一线露出书架。 */
@media (max-width: 640px) {
  .bp-overlay { padding: 0; align-items: flex-end; }
  .bp-sheet { width: 100%; max-height: none; height: calc(100dvh - 12px); border-radius: 14px 14px 0 0; transform: translateY(100%); transition-duration: .5s, .62s; }
  .bp-overlay.is-leaving .bp-sheet { transform: translateY(40%); }
  .bp-hero { min-height: 300px; padding: 18px 20px 22px; }
  .bp-mark { width: 88px; height: 88px; }
  .bp-mark.is-numeral { font-size: 54px; }
  .bp-title { font-size: 26px; }
  .bp-body { padding: 4px 20px 24px; }
  .bp-page { padding: 18px 16px 14px; }
  .bp-after ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bp-foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
}

.bp-overlay.is-still, .bp-overlay.is-still * { transition: none !important; animation: none !important; }
.bp-overlay.is-still .bp-sheet, .bp-overlay.is-still .bp-hero-text, .bp-overlay.is-still .bp-mark.is-numeral, .bp-overlay.is-still .bp-mark img { opacity: 1; transform: none; }
.bp-overlay.is-still .bp-art { transform: none; }
.bp-overlay.is-still .bp-mark svg > * { stroke-dashoffset: 0; }