/* StoryMint shared book card: .sm-book-card inside a .sm-book-grid.
   Owner: WS1. Used by the /app home tabs (WS1), My books /gallery (WS2) and the library (WS4).
   The markup contract is in static/shell/panels/README.md ("Shared book card") and
   plans/remediation-2026-09/ws1.md. Colours come only from the PLAN §4 I12 tokens. The fallback
   inside each var() is that token's value, so the card also renders before style.css ships them.
   Never put .card on the same element: its padding breaks the full-bleed cover. */

.sm-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 639.98px) {
  .sm-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.sm-book-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  background: var(--sm-surface, #fff);
  color: var(--sm-ink, #111512);
  border: 1px solid var(--sm-line, #e7e4dc);
  border-radius: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sm-book-card:hover,
.sm-book-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--sm-shadow-card);
  border-color: color-mix(in srgb, var(--sm-accent, #145c32) 28%, var(--sm-line, #e7e4dc));
}

/* ── Cover: always 3:4, whatever the image's own size ─────────────── */
.sm-book-card .sm-book-card-cover {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  border-radius: 13px 13px 0 0;
  background: var(--sm-panel, #f1ede4);
}
.sm-book-card .sm-book-card-cover > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
}
/* optional second image (coloring templates: the cover), shown on hover or focus */
.sm-book-card .sm-book-card-cover > img.sm-book-card-img-alt { opacity: 0; transition: opacity .2s ease; }
.sm-book-card:hover .sm-book-card-cover > img.sm-book-card-img-alt,
.sm-book-card:focus-within .sm-book-card-cover > img.sm-book-card-img-alt { opacity: 1; }

/* coloring pages sit on a paper frame and are never cropped */
.sm-book-card[data-format="coloring"] .sm-book-card-cover { background: var(--sm-paper, #faf8f3); }
.sm-book-card[data-format="coloring"] .sm-book-card-cover > img:not(.sm-book-card-img-alt) {
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  background: var(--sm-surface, #fff);
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--sm-line, #e7e4dc);
}

/* ── Status pill (only when a book is not ready) ─────────────────── */
.sm-book-card-status {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 16px);
  padding: 3px 9px 3px 7px;
  border-radius: var(--sm-r-pill, 999px);
  background: var(--sm-surface, #fff);
  color: var(--sm-ink, #111512);
  box-shadow: 0 0 0 1px var(--sm-line, #e7e4dc);
  font: 600 12px/1.35 var(--sm-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  /* CR-W2-10 (a): an ellipsis never shows on an inline-flex pill, so long labels
     ("No se pudo terminar") wrap instead of being cut mid-word */
  white-space: normal;
  line-height: 1.25;
  overflow: hidden;
  pointer-events: none;
}
.sm-book-card-status::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sm-gold, #d9a441);
}
.sm-book-card[data-status="done"] .sm-book-card-status::before { background: var(--sm-accent, #145c32); }
.sm-book-card[data-status="failed"] .sm-book-card-status::before { background: var(--sm-crayon-1, #ef4444); }
.sm-book-card[data-status="running"] .sm-book-card-status::before,
.sm-book-card[data-status="queued"] .sm-book-card-status::before { animation: sm-book-card-pulse 1.4s ease-in-out infinite; }
.sm-book-card[data-status="failed"] .sm-book-card-cover > img { filter: grayscale(1); opacity: .55; }

/* ── Format icon for covers with no image (failed books, missing covers). A loaded cover image
   sits on top of it, so it only shows while there is no picture. Markup:
   <div class="sm-book-card-placeholder" aria-hidden="true"><svg>…</svg></div> inside the cover. */
.sm-book-card .sm-book-card-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--sm-muted, #5f6f64);
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--sm-mint, #b6f0c8) 55%, transparent) 0 22%, transparent 23%),
    var(--sm-panel, #f1ede4);
}
.sm-book-card .sm-book-card-placeholder svg { width: 40px; height: 40px; opacity: .75; }
.sm-book-card[data-format="coloring"] .sm-book-card-placeholder { color: var(--sm-accent, #145c32); }
.sm-book-card[data-status="failed"] .sm-book-card-placeholder { background: var(--sm-panel, #f1ede4); }
/* the status pill wraps instead of clipping "No se pudo terminar" on a 2-column phone grid */
.sm-book-card[data-status="failed"] .sm-book-card-status { white-space: normal; line-height: 1.25; }
.sm-book-card.is-leaving { opacity: 0; transform: scale(.96); transition: opacity .2s ease, transform .2s ease; }

/* ── Body: title (2-line clamp) and meta row ─────────────────────── */
.sm-book-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px 12px 14px;
}
.sm-book-card-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--sm-ink, #111512);
  font: 600 15px/1.35 var(--sm-font-display, "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif);
  letter-spacing: -.005em;
  overflow-wrap: anywhere;
}
/* The title's link or button stretches over the whole card (one tab stop, one accessible name). */
.sm-book-card-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
}
.sm-book-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 14px;
}
.sm-book-card-link:focus { outline: none; }
.sm-book-card-link:focus-visible::after { outline: 2px solid var(--sm-accent, #145c32); outline-offset: 2px; }

.sm-book-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  margin: 0;
  color: var(--sm-muted, #5f6f64);
  font: 400 13px/1.3 var(--sm-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.sm-book-card-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--sm-r-pill, 999px);
  background: var(--sm-panel, #f1ede4);
  color: var(--sm-ink-2, #4a524c);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.sm-book-card[data-format="coloring"] .sm-book-card-badge { background: var(--sm-mint-soft, #e6f3e9); color: var(--sm-accent-ink, #0e3d1f); }
.sm-book-card-date { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Optional actions row (sits above the stretched link) ────────── */
.sm-book-card-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 12px;
}
.sm-book-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--sm-line, #e7e4dc);
  border-radius: var(--sm-r-pill, 999px);
  background: var(--sm-surface, #fff);
  color: var(--sm-ink, #111512);
  font: 600 13px/1 var(--sm-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  text-decoration: none;
  cursor: pointer;
}
.sm-book-card-action:hover { border-color: var(--sm-accent, #145c32); color: var(--sm-accent, #145c32); }
.sm-book-card-action:focus-visible { outline: 2px solid var(--sm-accent, #145c32); outline-offset: 2px; }

/* ── Loading skeleton (<div class="sm-book-card is-skeleton" aria-hidden="true">) ── */
.sm-book-card.is-skeleton { pointer-events: none; }
.sm-book-card.is-skeleton:hover { transform: none; box-shadow: none; border-color: var(--sm-line, #e7e4dc); }
.sm-book-card.is-skeleton .sm-book-card-cover,
.sm-book-card-skeleton-line {
  background: linear-gradient(90deg, var(--sm-panel, #f1ede4) 0%, var(--sm-paper, #faf8f3) 50%, var(--sm-panel, #f1ede4) 100%);
  background-size: 200% 100%;
  animation: sm-book-card-shimmer 1.2s linear infinite;
}
.sm-book-card-skeleton-line { display: block; height: 12px; border-radius: 6px; }
.sm-book-card-skeleton-line.is-short { width: 55%; }

@keyframes sm-book-card-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes sm-book-card-pulse { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .sm-book-card, .sm-book-card .sm-book-card-cover > img.sm-book-card-img-alt { transition: none; }
  .sm-book-card:hover, .sm-book-card:focus-within { transform: none; }
  .sm-book-card.is-skeleton .sm-book-card-cover, .sm-book-card-skeleton-line,
  .sm-book-card-status::before { animation: none !important; }
}

/* ── Design polish 2026-10 (tokens: style.css "Additive polish tokens"): resting depth, a lift with a green-tinted
   shadow on hover, a slow cover zoom, a hairline under the cover and a frosted status pill. ── */
.sm-book-card {
  border-color: color-mix(in srgb, var(--sm-line, #e7e4dc) 85%, transparent);
  border-radius: 16px;
  box-shadow: var(--sm-shadow-sm);
  transition: transform .28s var(--sm-ease), box-shadow .28s var(--sm-ease), border-color .2s ease;
}
.sm-book-card:hover,
.sm-book-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sm-shadow-lift);
  border-color: color-mix(in srgb, var(--sm-accent, #145c32) 22%, var(--sm-line, #e7e4dc));
}
.sm-book-card .sm-book-card-cover { border-radius: 15px 15px 0 0; }
.sm-book-card .sm-book-card-cover::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--sm-line, #e7e4dc) 80%, transparent);
}
.sm-book-card .sm-book-card-cover > img:not(.sm-book-card-img-alt) { transition: transform .6s var(--sm-ease); }
.sm-book-card:hover .sm-book-card-cover > img:not(.sm-book-card-img-alt) { transform: scale(1.035); }
.sm-book-card-link::after { border-radius: 16px; }
.sm-book-card-status {
  background: color-mix(in srgb, var(--sm-surface, #fff) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--sm-shadow-xs), 0 0 0 1px color-mix(in srgb, var(--sm-line, #e7e4dc) 80%, transparent);
  z-index: 2;
}
.sm-book-card-title { letter-spacing: var(--sm-track-tight); }
.sm-book-card-action { border-color: var(--sm-line-strong); box-shadow: var(--sm-shadow-xs); transition: border-color var(--sm-dur) ease, color var(--sm-dur) ease, background-color var(--sm-dur) ease; }
.sm-book-card-action:hover { background: var(--sm-tint); }
.sm-book-card.is-skeleton:hover { box-shadow: var(--sm-shadow-xs); }

@media (prefers-reduced-motion: reduce) {
  .sm-book-card, .sm-book-card .sm-book-card-cover > img:not(.sm-book-card-img-alt) { transition: none; }
  .sm-book-card:hover .sm-book-card-cover > img:not(.sm-book-card-img-alt) { transform: none; }
}