/* Books: the reading corner (category chips, the stack of books you flip through, the front book explained below, grid view). */
.bk-cats{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bk-cats::-webkit-scrollbar{display:none}
.bk-cats .chip{flex:none}
.bk-trackwrap{position:relative}
/* The stack: books overlap like a handful of books; JS places each cover (see layout() in views/books.js). */
.bk-stack{--bw:168px;position:relative;height:calc(var(--bw) * 1.5 + 66px);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;border-radius:var(--r-ctl);cursor:grab}
.bk-stack.drag{cursor:grabbing}
.bk-stack:focus-visible{box-shadow:0 0 0 3px rgba(var(--gd),.35)}
.bk-slide{position:absolute;left:50%;top:14px;width:var(--bw);margin-left:calc(var(--bw) / -2);border:0;background:transparent;padding:0;cursor:pointer;transform-origin:50% 100%;transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .3s ease,opacity .3s ease;border-radius:6px;-webkit-tap-highlight-color:transparent;will-change:transform}
.bk-stack.noanim .bk-slide,.bk-stack.drag .bk-slide{transition:none}
.bk-slide .cvr{width:100%!important;display:flex;box-shadow:0 9px 20px rgba(0,0,0,.36);pointer-events:none}
.bk-slide:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.bk-slide.on .cvr{box-shadow:0 12px 26px rgba(0,0,0,.45)}
.bk-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--edge2);background:rgba(var(--pn),.92);color:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.bk-nav:hover{border-color:var(--gold);color:var(--gold2)}
.bk-prev{left:2px}.bk-next{right:2px}
.bk-detail{max-width:560px;margin:0 auto;width:100%;text-align:center;align-items:center}
.bk-detail .f{justify-content:center}
.bk-detail .bar{min-width:140px}
.bk-title{font-size:1.75rem;line-height:1.1;display:block}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
@media (max-width:560px){
  .bk-nav{display:none}
  .bk-stack{--bw:148px}
}
@media (prefers-reduced-motion:reduce){
  .bk-slide{transition:none}
}