/* /library — page-only styles. Shared blocks live in site.css. */

/* Book grid: covers stand on a shelf line, so landscape and square covers both look right. */
.page-library .lib-grid {
  display: grid; gap: clamp(20px, 3vw, 36px) clamp(16px, 2.4vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  align-items: start;
}
.page-library .lib-card {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; text-decoration: none; color: var(--ink);
  perspective: 900px;
}
.page-library .lib-cover {
  display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1 / 1; padding-bottom: 10px;
  margin-bottom: 8px; position: relative; border-bottom: 3px solid rgba(38, 36, 80, 0.12);
}
.page-library .lib-cover img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
  border-radius: 4px 14px 14px 4px; box-shadow: var(--shadow), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  background: var(--paper-deep); transform-origin: left center;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.page-library .lib-card:hover .lib-cover img,
.page-library .lib-card:focus-visible .lib-cover img { transform: rotateY(-14deg) translateY(-6px); box-shadow: var(--shadow-lift); }
.page-library .lib-card:hover { color: var(--ink); }
.page-library .lib-title { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.2; text-wrap: balance; }
.page-library .lib-card:hover .lib-title { color: var(--grape-deep); }
.page-library .lib-meta { font-size: 0.86rem; color: var(--muted); }

.page-library .lib-cover.is-missing {
  align-items: center; background: var(--grape-soft); border-radius: 4px 14px 14px 4px; box-shadow: var(--shadow-sm);
}
.page-library .lib-missing-mark { font-size: 3rem; color: var(--grape); opacity: 0.6; }

/* While the API answers, the static grid stays visible, just a touch quieter. */
.page-library .lib-grid.is-loading { opacity: 0.9; }

/* Skeletons for the community list */
.page-library .lib-card.is-skeleton .lib-cover { background: rgba(38, 36, 80, 0.07); border-radius: 6px 14px 14px 6px; animation: lib-pulse 1.4s ease-in-out infinite; }
.page-library .lib-card.is-skeleton .lib-title,
.page-library .lib-card.is-skeleton .lib-meta { display: block; height: 14px; border-radius: 7px; background: rgba(38, 36, 80, 0.07); }
.page-library .lib-card.is-skeleton .lib-title { width: 80%; height: 18px; }
.page-library .lib-card.is-skeleton .lib-meta { width: 55%; }
@keyframes lib-pulse { 50% { opacity: 0.5; } }

/* Empty / error message that spans the grid */
.page-library .lib-empty {
  grid-column: 1 / -1; text-align: center; margin: 0; padding: 36px 24px; border-radius: var(--radius);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft);
  display: grid; justify-items: center; gap: 14px;
}
.page-library .lib-empty p { margin: 0; }
.page-library .lib-status { text-align: center; color: var(--muted); font-size: 0.95rem; min-height: 1.4em; margin: 18px 0 0; }
.page-library .lib-more { margin: 28px 0 0; }
.page-library .lib-more[hidden] { display: none; }

/* "Share your own" */
.page-library .steps-col { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: sc; }
.page-library .steps-col li { counter-increment: sc; display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; align-items: start; }
.page-library .steps-col li::before {
  content: counter(sc); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold); color: var(--ink); font-weight: 900; box-shadow: 0 3px 0 var(--ink);
}
.page-library .steps-col b { display: block; }
.page-library .steps-col span { color: var(--ink-soft); font-size: 0.98rem; }
.page-library .guidelines { background: var(--card); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); }
.page-library .guidelines h3 { margin-bottom: 0; }
.page-library .guidelines .check-list { margin-bottom: 0; }

@media (max-width: 900px) {
  .page-library .feature { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .page-library .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .page-library .lib-title { font-size: 0.98rem; }
}
@media (prefers-reduced-motion: reduce) {
  .page-library .lib-cover img { transition: none; }
  .page-library .lib-card:hover .lib-cover img { transform: none; }
  .page-library .lib-card.is-skeleton .lib-cover { animation: none; }
}