/* Shelf surface inside #desk-stage: whole-cover Row & centered Grid. */
.library {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--ui-sans);
  overflow: hidden;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.library.is-preparing,
.library.is-placing,
.library-shelf.is-card-dragging .shelf-book-label,
.library-shelf .shelf-book.is-carried .shelf-book-label { opacity: 0; pointer-events: none; }
.library.is-placing { transition: opacity 240ms ease-out; }

.library-collection {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.library-shelf {
  --shelf-gap: 48px;
  display: flex;
  gap: var(--shelf-gap);
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: calc(var(--bar-top, 57px) + 20px) 0 calc(var(--bar-bottom, 64px) + 28px);
  perspective: 2400px;
  perspective-origin: 50% 44%;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.library-shelf:not([data-layout="grid"])::before,
.library-shelf:not([data-layout="grid"])::after {
  content: "";
  flex: 0 0 max(0px, calc(50% - var(--row-card-w, 220px) / 2 - var(--shelf-gap)));
}
/* The row's window of whole covers (app.js, rowBand): lead and tail centre the chosen one in it. */
.library-shelf:not([data-layout="grid"])::before { flex-basis: var(--row-lead, max(0px, calc(50% - var(--row-card-w, 220px) / 2 - var(--shelf-gap)))); }
.library-shelf:not([data-layout="grid"])::after { flex-basis: var(--row-tail, max(0px, calc(50% - var(--row-card-w, 220px) / 2 - var(--shelf-gap)))); }
.library-shelf::-webkit-scrollbar { display: none; width: 0; height: 0; }
.library-shelf.is-dragging { cursor: grabbing; user-select: none; }
.library-shelf.is-dragging .shelf-book-open,
.library-shelf.is-rearranging { pointer-events: none; }
.library-shelf.is-rearranging,
.library-shelf.is-dragging,
.library-shelf.is-settling-pan,
.library-shelf.is-wheel-browsing,
.library-shelf.is-card-dragging { scroll-snap-type: none; }
.library.is-preparing,
.library-shelf.is-rearranging .shelf-book-open,
.library.is-preparing .shelf-book-open,
.library.is-placing .shelf-book-open,
.library-shelf .shelf-book.is-carried.is-dragging-active .shelf-book-open { transition: none !important; }
.library-shelf.is-card-dragging, .library-shelf.is-card-dragging * { user-select: none; touch-action: none !important; }

.shelf-book {
  position: relative;
  flex: none;
  width: var(--row-card-w, 220px);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transform-style: preserve-3d;
  transition: opacity 180ms ease, z-index 0s 120ms;
}
.shelf-book.is-focused { z-index: 5; transition: z-index 0s 0s; }
.shelf-book:not(.is-focused) .shelf-book-open { opacity: 0.85; }
.shelf-book-open {
  position: relative;
  display: flex;
  width: var(--row-card-w, 220px);
  height: calc(var(--row-card-w, 220px) * 1.5);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  touch-action: pan-x;
  -webkit-user-drag: none;
  user-select: none;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}
.shelf-book.is-away .shelf-book-open { visibility: hidden; }
.shelf-book-cover {
  position: relative;
  display: block;
  width: var(--row-card-w, 220px);
  height: calc(var(--row-card-w, 220px) * 1.5);
  overflow: visible;
  background: var(--color-cover-bg);
  isolation: isolate;
}
.shelf-book-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 512px;
  height: 768px;
  overflow: hidden;
  transform: scale(var(--row-art-scale, 0.43));
  transform-origin: 0 0;
}
.shelf-book-label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--label-mt, 20px);
  max-width: 100%;
  cursor: pointer;
  user-select: none;
  transition: opacity 120ms ease;
}
.shelf-book-label::before {
  content: "•";
  position: absolute;
  left: calc(-13px * var(--u, 1));
  top: 0;
  font: 400 calc(16px * var(--u, 1))/1.3 var(--ui-serif);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.shelf-book-edition {
  position: relative;
  font: 400 calc(16px * var(--u, 1))/1.3 var(--ui-serif);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shelf-book.is-focused .shelf-book-label::before { opacity: 1; }
.shelf-book-name {
  color: var(--ink-2);
  font-size: calc(11px * var(--u, 1));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Reordering / carrying state */
.library-shelf.is-card-dragging .shelf-book {
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: translate3d(var(--drag-shift-x, var(--drag-shift, 0px)), var(--drag-shift-y, 0px), 0);
}
.library-shelf .shelf-book.is-carried { z-index: 60; transition: none !important; transform: none !important; }
.library-shelf .shelf-book.is-carried .shelf-book-open {
  touch-action: none;
  transform: translate3d(var(--carry-x, 0px), var(--carry-y, 0px), 48px) scale(var(--carry-scale, 1.04));
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Grid layout: centered when fits, scrollable when overflowing */
.library-shelf[data-layout="grid"] {
  --grid-zoom: 1;
  --grid-card-w: calc(180px * var(--grid-zoom, 1));
  --row-card-w: var(--grid-card-w);
  --row-art-scale: calc(0.3515625 * var(--grid-zoom, 1));
  --label-mt: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--grid-card-w));
  gap: calc(36px * var(--grid-zoom, 1)) calc(32px * var(--grid-zoom, 1));
  justify-content: center;
  align-content: safe center;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: none;
  padding: calc(var(--bar-top, 57px) + 36px) 84px calc(var(--bar-bottom, 64px) + 48px) 56px;
  cursor: default;
  touch-action: pan-y pinch-zoom;
}
.library-shelf[data-layout="grid"] .shelf-book-open { touch-action: pan-y pinch-zoom; }
body.in-library #drawer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.book3d .shelf-book,
.book3d .shelf-book.is-focused,
.book3d .library-shelf .shelf-book.is-carried { z-index: 0; }