/* CSS-only closed-book volume. Carousel rotation moves every face together. */
.book-volume {
  --book-depth: clamp(22px, calc(var(--shelf-cover-width, 180px) * .13), 42px);
  --book-half-depth: calc(var(--book-depth) / 2);
  --book-binding: #19303e;
  --book-binding-ink: #d7bc89;
  position: relative; display: block; transform-style: preserve-3d;
  transform: perspective(1100px) rotateY(var(--shelf-turn, 0deg));
}
.book-volume[data-book-tone="sand"] { --book-binding: #b7a27b; --book-binding-ink: #5f482b; }
.book-volume[data-book-tone="forest"] { --book-binding: #213d32; --book-binding-ink: #c2c5a3; }
.book-volume[data-book-tone="terracotta"] { --book-binding: #503429; --book-binding-ink: #e5c4a0; }
.book-volume[data-book-tone="slate"] { --book-binding: #2b4052; --book-binding-ink: #c3d1d5; }
.book-volume[data-book-tone="wine"] { --book-binding: #432b38; --book-binding-ink: #dbb7b2; }
.book-display .book-volume > .book-cover,
.book-display.is-selected .book-volume > .book-cover,
.shelf-carousel .book-display .book-volume > .book-cover {
  transform: translateZ(var(--book-half-depth)); backface-visibility: hidden;
  box-shadow: inset 4px 0 4px #0006, inset 7px 0 1px #d4b67525, 0 1px 2px #0006;
}
.book-volume > .book-cover { border-radius: 2px 5px 5px 2px; }
.book-back-board, .book-page-edge, .book-spine, .book-binding-ridge { position: absolute; display: block; pointer-events: none; backface-visibility: hidden; }
.book-back-board {
  inset: 0; transform: translateZ(calc(0px - var(--book-half-depth)));
  border: 1px solid color-mix(in srgb, var(--book-binding-ink) 45%, var(--book-binding));
  border-radius: 2px 5px 5px 2px; background: var(--book-binding);
  box-shadow: 10px 16px 24px #0005, 0 3px 6px #0004;
}
.book-pages-side {
  top: 5px; left: calc(100% - 3px); width: calc(var(--book-depth) - 6px); height: calc(100% - 10px);
  transform-origin: left center;
  transform: translateZ(calc(var(--book-half-depth) - 3px)) rotateY(90deg);
  background: linear-gradient(90deg, #6b5a392e, transparent 28%, #fff5 68%, #76603a40), repeating-linear-gradient(180deg, #e9ddc4 0 1px, #c1b398 1px 2px);
  border: 1px solid #a596795c; box-shadow: inset 2px 0 3px #8b734733;
}
.book-pages-top, .book-pages-bottom {
  left: 5px; width: calc(100% - 10px); height: calc(var(--book-depth) - 6px);
  background: repeating-linear-gradient(180deg, #e8ddc5 0 1px, #c8b99b 1px 2px); border: 1px solid #c1b092;
}
.book-pages-top { top: 4px; transform-origin: center top; transform: translateZ(calc(3px - var(--book-half-depth))) rotateX(90deg); }
.book-pages-bottom { bottom: 4px; transform-origin: center bottom; transform: translateZ(calc(3px - var(--book-half-depth))) rotateX(-90deg); filter: brightness(.86); }
.book-spine {
  top: 0; left: 0; width: var(--book-depth); height: 100%; transform-origin: left center;
  transform: translateZ(calc(0px - var(--book-half-depth))) rotateY(-90deg);
  border: 1px solid color-mix(in srgb, var(--book-binding-ink) 45%, var(--book-binding));
  background: linear-gradient(90deg, #0005, #fff1 30%, transparent 65%, #0004), var(--book-binding);
  color: var(--book-binding-ink); border-radius: 2px;
}
.book-spine > span { display: block; position: absolute; top: 12%; left: 50%; transform: translateX(-50%); writing-mode: vertical-rl; font-family: var(--serif); font-size: clamp(8px, calc(var(--book-depth) * .29), 12px); letter-spacing: .16em; max-height: 70%; overflow: hidden; }
.book-spine > i { position: absolute; inset: auto 18% 8%; height: 4px; border-block: 1px solid currentColor; opacity: .5; }
/* A rounded binding lip remains visible even when the cover is exactly face-on. */
.book-binding-ridge {
  --binding-ridge-width: clamp(5px, calc(var(--book-depth) * .24), 11px);
  top: 0; left: calc(2px - var(--binding-ridge-width)); width: var(--binding-ridge-width); height: 100%;
  transform: translateZ(calc(var(--book-half-depth) - 1px));
  border: 1px solid color-mix(in srgb, var(--book-binding-ink) 40%, var(--book-binding));
  border-radius: 6px 1px 1px 6px;
  background: linear-gradient(90deg, #0004, #fff2 35%, transparent 62%, #0003), var(--book-binding);
  box-shadow: -1px 1px 2px #0003;
}
.grid-mode .book-volume { --book-depth: 18px; transform: perspective(1000px) rotateY(0deg); }
.shelf-carousel.is-moving .book-volume, .shelf-carousel.is-dragging .book-volume { will-change: transform; }
/* Keep the tool strip facing the reader rather than attaching it to a 3D face. */
.book-front > .book-actions { transform: translateZ(0); }