/* 复盘镜 售前 · 翻开它的时候（WO-OPUS-019 三 · 定稿；手机按方案 A：书在上，六个时刻在下）
   同一本档案（和“先翻一遍”是同一本书），时钟从开盘前走到第九十天；走到哪个时刻，书就翻到那一页，一根书签落下。
   只给页名、不露那一页的正文；时刻全部取自报告自己写的时刻。下面一排六个时刻，点哪个翻哪页。 */
#when .wh-stage{position:relative;margin-top:24px;display:grid;justify-items:center}
.wh-clock{display:grid;justify-items:center;gap:10px;width:100%;max-width:420px}
.wh-clock .t{font:700 34px/1 var(--type);letter-spacing:.06em;color:var(--ink);min-height:34px;font-variant-numeric:tabular-nums}
.wh-clock .t i{display:inline-block;width:.5em;height:.9em;margin-left:3px;vertical-align:-.08em;background:var(--cin);animation:whBlink 1s steps(1) infinite}
@keyframes whBlink{50%{opacity:0}}
/* 时间轴：一天里三格，折一下，之后三格 */
.wh-track{position:relative;width:100%;height:22px}
.wh-track::before{content:"";position:absolute;left:4px;right:4px;top:10px;height:1.5px;background:var(--rule)}
.wh-track .fold{position:absolute;top:3px;left:calc(50% - 7px);width:14px;height:16px;background:var(--desk);
  background-image:linear-gradient(75deg,transparent 42%,var(--muted) 43% 49%,transparent 50%),linear-gradient(75deg,transparent 58%,var(--muted) 59% 65%,transparent 66%)}
.wh-track .wh-dot{position:absolute;top:5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--paper);border:1.5px solid var(--muted);transition:background .3s,border-color .3s}
.wh-track .wh-dot.wh-was{background:var(--muted)}
.wh-track .wh-dot.wh-cur{background:var(--cin);border-color:var(--cin);box-shadow:0 0 0 5px color-mix(in srgb,var(--cin) 18%,transparent)}
.wh-track .lab{position:absolute;top:24px;font:500 9.5px/1 var(--mono);letter-spacing:.08em;color:var(--muted);transform:translateX(-50%);white-space:nowrap}
/* 书：与“先翻一遍”同一本 */
.wh-book{position:relative;width:min(240px,62vw);aspect-ratio:390/750;margin-top:30px;perspective:1600px}
.wh-book::before{content:"";position:absolute;inset:6px -8px -8px 6px;background:var(--paper-2);border:1px solid var(--rule);border-radius:2px 6px 6px 2px;box-shadow:0 24px 36px -24px var(--shadow)}
.wh-book::after{content:"";position:absolute;top:8px;bottom:-6px;right:-12px;width:10px;border-radius:0 4px 4px 0;background:repeating-linear-gradient(90deg,var(--paper) 0 1px,var(--rule) 1px 2px)}
.wh-pg{position:absolute;inset:0;background:var(--paper) center/cover no-repeat;border:1px solid var(--rule);border-radius:1px 3px 3px 1px;transform-origin:0 50%;opacity:0;
  box-shadow:inset 12px 0 16px -14px rgba(58,44,24,.35)}
.wh-pg.on{opacity:1}
.motion .wh-pg.flip{animation:whFlip var(--d,110ms) cubic-bezier(.3,.7,.3,1) both}
@keyframes whFlip{from{transform:rotateY(-58deg) translateX(8%);opacity:.4}to{transform:none;opacity:1}}
/* 书签：从书顶落下来，压在这一页上 */
.wh-ribbon{position:absolute;top:-10px;right:28px;width:16px;height:70px;background:var(--cin);z-index:200;clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
  box-shadow:0 3px 4px -2px var(--shadow);transform-origin:50% 0;transform:scaleY(0);transition:transform .45s var(--e-stamp)}
.wh-book.marked .wh-ribbon{transform:scaleY(1)}
.wh-cap{margin:22px 0 0;text-align:center;min-height:4.6em;max-width:340px}
.wh-cap b{display:block;font:900 20px/1.45 var(--serif);color:var(--ink)}
.wh-cap span{display:block;margin-top:4px;font:500 12.5px/1.5 var(--mono);letter-spacing:.06em;color:var(--muted)}
.wh-cap .m{display:block;font:600 15px/1.6 var(--serif);color:var(--cin);margin-bottom:4px}
.motion .wh-cap.swap{animation:whCap .45s var(--e-out)}
@keyframes whCap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* 六个时刻：点哪个翻哪页（静态时也完整可读） */
.wh-list{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:560px}
.wh-list button{display:grid;gap:2px;width:100%;min-height:72px;padding:10px 12px;text-align:left;background:var(--paper);border:1px solid var(--rule);border-radius:2px;cursor:pointer;color:var(--ink)}
.wh-list .lt{font:700 12px/1 var(--type);letter-spacing:.08em;color:var(--muted)}
.wh-list .lm{font:600 14.5px/1.45 var(--serif)}
.wh-list .lp{font:500 11.5px/1.4 var(--sans);color:var(--muted)}
.wh-list button[aria-current="true"]{border-color:var(--cin);box-shadow:inset 3px 0 0 var(--cin)}
.wh-list button[aria-current="true"] .lt{color:var(--cin)}
.wh-list button:focus-visible{outline:2px solid var(--cin);outline-offset:2px}
.wh-here{font-style:normal;color:var(--cin)}
.wh-fine{margin:14px 0 0;font:500 12px/1.6 var(--sans);color:var(--muted);max-width:560px}
@media (min-width:900px){
  #when .wh-body{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px;align-items:start;margin-top:10px}
  .wh-list{grid-template-columns:1fr;margin-top:24px}
  .wh-list button{grid-template-columns:76px minmax(0,1fr);align-items:baseline;min-height:58px}
  .wh-list .lp{grid-column:2}
}
@media (prefers-reduced-motion:reduce){.wh-ribbon{transition:none}.wh-clock .t i{display:none}}