/* ─────────────────────────────────────────────────────
   LIBRARY SHELF — page-local tokens + tile styling
   Pencil/graphite colors are scoped to this module ONLY,
   not promoted to the site palette. Single-accent (red)
   rule still binds elsewhere.

   Assumes the page defines: --paper, --paper-2, --ink,
   --ink-2, --red, --muted, --serif, --display, --mono,
   --ease.
   ───────────────────────────────────────────────────── */

.library-shelf {
  --graphite:    rgba(70, 65, 56, 0.62);
  --graphite-hi: rgba(20, 18, 14, 0.78);
  --graphite-fade: rgba(58, 52, 44, 0.22);
  --shelf-spine: var(--ink);
  --shelf-cream: var(--paper-2);
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(2.2rem, 4vh, 3.2rem);
}

.library-shelf.compact {
  gap: 1.4rem;
}

.library-row {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.library-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0 0.2rem;
  border-bottom: 1px solid var(--rule-soft, rgba(14,14,12,0.18));
}

.library-row__label {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  font-variant-caps: small-caps;
  text-transform: lowercase;
  color: var(--ink);
}

.library-row__note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--muted);
}

.library-row__stage {
  position: relative;
  width: 100%;
  /* Tall enough to hold the tallest book plus lean tipping and event lift */
  height: clamp(220px, 30vh, 280px);
  overflow: hidden;
  /* On mobile this is replaced with horizontal scroll */
}

.library-shelf.compact .library-row__stage {
  height: clamp(220px, 26vh, 240px);
}

.library-row__canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── Book tile (positioned by JS, transform managed by JS) ── */
.book-tile {
  position: absolute;
  bottom: 24px; /* rests on the shelf line */
  /* width/height set inline by JS */
  display: block;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  z-index: 2;
  transform-origin: 50% 100%; /* lean from the foot of the book */
  will-change: transform;
  outline: none;
  transition: filter .25s var(--ease);
}

.book-tile:focus-visible {
  outline: 1.5px solid var(--red);
  outline-offset: 4px;
}

/* ── Cover-face-out tile ─────────────────────────────────
   Holds the cover image at its natural aspect (sized by JS
   from naturalWidth/naturalHeight) plus three visual cues
   that make the rectangle read as a book:
     - .tile-page-top : thin cream stripe ABOVE the cover,
                        showing the page block.
     - .tile-cover-img : the cover image itself, full-bleed.
     - .tile-spine-edge : thin darker sliver on the LEFT,
                          suggesting the wrapped spine.
   ───────────────────────────────────────────────────── */
.book-tile.face-cover {
  background: var(--ink);
  box-shadow:
    0 1px 0 rgba(20,18,14,0.55),                /* contact line */
    inset 0 0 0 0.5px rgba(20,18,14,0.85),      /* hairline frame */
    0 10px 20px rgba(20,18,14,0.22);            /* depth shadow */
  overflow: visible;
  border-radius: 0;
}

.book-tile.face-cover .tile-page-top {
  position: absolute;
  left: 2px;
  right: 0;
  top: -3px;
  height: 3px;
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3, #E3DCC8) 100%);
  border-top: 0.5px solid rgba(20,18,14,0.6);
  border-bottom: 0.5px solid rgba(20,18,14,0.18);
  z-index: 3;
  pointer-events: none;
}

.book-tile.face-cover .tile-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill; /* tile is sized exactly to image aspect so this fills cleanly */
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.book-tile.face-cover .tile-spine-edge {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background:
    linear-gradient(90deg,
      rgba(20,18,14,0.55) 0%,
      rgba(20,18,14,0.18) 70%,
      rgba(20,18,14,0.00) 100%);
  z-index: 3;
  pointer-events: none;
}

/* ── Spine-only tile ─────────────────────────────────────
   Tall narrow rectangle with the title set vertical. Page
   edges (head and tail of the book) are drawn as cream
   stripes above and below the colored spine body, so the
   tile reads as a closed book seen edge-on, not as a label.
   ───────────────────────────────────────────────────── */
.book-tile.face-spine {
  background: var(--shelf-cream);
  display: flex;
  flex-direction: column;
  overflow: visible;
  box-shadow:
    0 1px 0 rgba(20,18,14,0.45),
    0 8px 14px rgba(20,18,14,0.16);
  border: 0;
  border-radius: 0;
}

/* The colored spine body — between the two page-edge bands */
.book-tile.face-spine .spine-body {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 3px;
  overflow: hidden;
  border-left: 1px solid rgba(20,18,14,0.85);
  border-right: 1px solid rgba(20,18,14,0.85);
}

/* Page edges — head (top) and tail (bottom). Cream stripes
   with subtle banding that suggests the closed page block. */
.book-tile.face-spine .spine-page-edge {
  flex-shrink: 0;
  height: 5px;
  background:
    repeating-linear-gradient(180deg,
      var(--paper-2) 0px,
      var(--paper-2) 1px,
      var(--paper-3, #E3DCC8) 1px,
      var(--paper-3, #E3DCC8) 2px);
  border-top: 0.5px solid rgba(20,18,14,0.6);
  border-bottom: 0.5px solid rgba(20,18,14,0.6);
}

.book-tile.face-spine .spine-page-edge.head { border-top: 0.5px solid rgba(20,18,14,0.45); }
.book-tile.face-spine .spine-page-edge.tail { border-bottom: 0.5px solid rgba(20,18,14,0.45); }

/* Spine title color depends on body hue */
.book-tile.face-spine.hue-ink   .spine-body { background: var(--ink);         color: var(--paper); }
.book-tile.face-spine.hue-red   .spine-body { background: var(--red);         color: var(--paper); }
.book-tile.face-spine.hue-cream .spine-body { background: var(--shelf-cream); color: var(--ink); }
.book-tile.face-spine.hue-ink   { background: var(--ink); }
.book-tile.face-spine.hue-red   { background: var(--red); }
.book-tile.face-spine.hue-cream { background: var(--shelf-cream); }

/* Year is a small mono caps band inside the body, near the bottom */
.book-tile.face-spine .spine-year {
  position: absolute;
  bottom: 6px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--mono-c);
  letter-spacing: var(--mono-c-track);
  text-transform: uppercase;
  opacity: 0.6;
  pointer-events: none;
}

.book-tile.face-spine .tile-spine-title {
  font-family: var(--display);
  font-style: italic;
  /* Base size — JS auto-fit (fitSpineTitle) will scale this down for long
     titles. Range is 8px to 12.5px. Vertical text on a thin spine looks
     cramped above ~12.5px even when it fits, so the upper bound stays low. */
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.003em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-height: 0;
  display: block;
  padding: 4px 0 22px; /* top breathing room; bottom reserves space for spine-year */
  text-align: center;
}

/* Tile caption — title + year, museum-label register. Sits ABOVE
   the book (previously was below at bottom: -22px but the shelf
   board paint zone clipped it). Mirrored in css/toys-grid.css for
   the toys shelf. */
.book-tile .tile-caption {
  position: absolute;
  left: 50%;
  bottom: 100%;            /* sits flush above the tile */
  margin-bottom: 8px;      /* small gap between caption and book top */
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: var(--mono-c);
  letter-spacing: var(--mono-c-track);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s var(--ease);
  pointer-events: none;
}

.book-tile:hover .tile-caption,
.book-tile:focus-visible .tile-caption {
  opacity: 1;
}

/* Subtle hover effect — also reinforced by JS lift transform */
.book-tile:hover {
  filter: brightness(1.04);
  z-index: 3;
}

/* While being dragged: render above everything, deeper shadow,
   grabbing cursor. JS handles the actual movement and lift. */
.book-tile.is-dragging {
  z-index: 10;
  filter: brightness(1.06);
  box-shadow:
    0 1px 0 rgba(20,18,14,0.5),
    0 20px 36px rgba(20,18,14,0.32);
  cursor: grabbing;
}
/* Cursor + touch-action: desktop allows drag-to-reorder (touch-action: none
   captures pointer gestures for the JS drag handler); mobile keeps the
   default so horizontal shelf-scrolling still works. */
@media (min-width: 721px) {
  .book-tile { cursor: grab; touch-action: none; }
}
@media (max-width: 720px) {
  .book-tile { cursor: pointer; touch-action: pan-x; }
}

/* ── Shelf end-cap (opts.endCap) ─────────────────────────
   The last thing on a filled shelf: a card standing on the
   board with more cards stacked behind it, saying how many
   books are not shown and linking to the full library. Makes
   the compact shelf read as the front of a larger collection. */
.shelf-endcap {
  position: absolute;
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 12px 12px;
  box-sizing: border-box;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  box-shadow:
    5px -5px 0 -1px var(--paper), 5px -5px 0 0 var(--rule-soft),
    10px -10px 0 -1px var(--paper), 10px -10px 0 0 var(--rule-soft),
    0 1px 0 rgba(20,18,14,0.25);
  transition: transform .3s var(--ease), border-color .25s var(--ease);
}
.shelf-endcap .endcap-count {
  font-family: var(--display);
  font-style: italic;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--red);
}
.shelf-endcap .endcap-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 0.3rem;
}
.shelf-endcap .endcap-cta {
  margin-top: auto;
  padding-top: 0.55rem;
  width: 100%;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: var(--mono-b);
  letter-spacing: var(--mono-b-track);
  text-transform: uppercase;
  line-height: 1.5;
  transition: color .25s var(--ease);
}
.shelf-endcap:hover,
.shelf-endcap:focus-visible {
  transform: translateY(-6px);
  border-color: var(--red);
  outline: none;
}
.shelf-endcap:hover .endcap-cta,
.shelf-endcap:focus-visible .endcap-cta { color: var(--red); }
@media (prefers-reduced-motion: reduce) {
  .shelf-endcap { transition: none; }
  .shelf-endcap:hover, .shelf-endcap:focus-visible { transform: none; }
}

/* The dedicated library page wraps each row in extra paper */
.library-page .library-row__stage {
  background: linear-gradient(180deg, transparent 0%, transparent 70%, rgba(70,65,56,0.04) 100%);
}

/* Mobile: drop the row metaphor — one horizontal scroll shelf */
@media (max-width: 720px) {
  .library-shelf {
    gap: 1rem;
  }
  .library-row__head {
    padding: 0 1rem;
  }
  .library-row__stage {
    height: clamp(200px, 30vh, 240px);
    overflow-x: auto;
    overflow-y: hidden;
    /* Allow content to extend beyond the visible area */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .library-row__stage::-webkit-scrollbar { height: 4px; }
  .library-row__stage::-webkit-scrollbar-thumb { background: var(--graphite-fade); }
  /* On mobile we still want canvas to span the stage */
  .library-row__canvas {
    position: absolute;
    inset: 0;
    /* JS sets canvas width to the inner scroll width at init */
  }
}

/* Reduce motion: kill events, leave layout */
@media (prefers-reduced-motion: reduce) {
  .book-tile {
    transition: none;
  }
}