/* 72-review-share-card.css — v15.579 shareable review image modal.

   Sits above the full-page review (which is high in the stack) but below the
   episode page, so the sheet is always reachable from the review it belongs to
   and never traps anything underneath it. */

.shelfd-review-share {
  position: fixed;
  inset: 0;
  z-index: 7400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
  opacity: 0;
  transition: opacity 180ms ease;
}
.shelfd-review-share.is-open { opacity: 1; }

/* 60% dim and NO blur, deliberately: the point of this sheet is to show the
   user the exact picture they are about to post, and a blurred backdrop makes
   the preview read as a mock-up rather than as the artifact itself. It is also
   the single most expensive thing that could sit behind a full-screen image. */
.shelfd-review-share-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.shelfd-review-share-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, calc(400 * var(--shelfd-px, 1px)));
  max-height: 100%;
  padding: calc(14 * var(--shelfd-px, 1px)) calc(14 * var(--shelfd-px, 1px)) calc(16 * var(--shelfd-px, 1px));
  border-radius: calc(20 * var(--shelfd-px, 1px));
  background: #14181d;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(10px) scale(0.98);
  transition: transform 220ms cubic-bezier(0.40, 0.05, 0.20, 1);
}
.shelfd-review-share.is-open .shelfd-review-share-panel { transform: none; }

.shelfd-review-share-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 calc(2 * var(--shelfd-px, 1px)) calc(11 * var(--shelfd-px, 1px));
}
.shelfd-review-share-title {
  font-size: calc(15 * var(--shelfd-px, 1px));
  font-weight: 600;
  color: #fff;
}
.shelfd-review-share-x {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto;
  width: calc(30 * var(--shelfd-px, 1px));
  height: calc(30 * var(--shelfd-px, 1px));
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.shelfd-review-share-x svg { width: calc(15 * var(--shelfd-px, 1px)); height: calc(15 * var(--shelfd-px, 1px)); }

/* The preview scrolls on short screens rather than shrinking the image into
   illegibility — the user is judging whether this is postable. */
.shelfd-review-share-preview {
  flex: 1 1 auto;
  min-height: calc(160 * var(--shelfd-px, 1px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: calc(12 * var(--shelfd-px, 1px));
  background: #0d0f12;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.shelfd-review-share-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(12 * var(--shelfd-px, 1px));
}
.shelfd-review-share-fail {
  padding: calc(28 * var(--shelfd-px, 1px)) calc(18 * var(--shelfd-px, 1px));
  font-size: calc(13 * var(--shelfd-px, 1px));
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}
.shelfd-review-share-spinner {
  width: calc(26 * var(--shelfd-px, 1px));
  height: calc(26 * var(--shelfd-px, 1px));
  margin: calc(46 * var(--shelfd-px, 1px)) auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: #E6C766;
  animation: shelfd-review-share-spin 700ms linear infinite;
}
@keyframes shelfd-review-share-spin { to { transform: rotate(360deg); } }

.shelfd-review-share-actions {
  flex: 0 0 auto;
  display: flex;
  gap: calc(8 * var(--shelfd-px, 1px));
  padding-top: calc(12 * var(--shelfd-px, 1px));
}
.shelfd-review-share-btn {
  appearance: none; -webkit-appearance: none;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--shelfd-px, 1px));
  padding: calc(12 * var(--shelfd-px, 1px)) calc(8 * var(--shelfd-px, 1px));
  border-radius: calc(12 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: inherit;
  font-size: calc(13.5 * var(--shelfd-px, 1px));
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 140ms ease;
}
.shelfd-review-share-btn svg {
  flex: 0 0 auto;
  width: calc(17 * var(--shelfd-px, 1px));
  height: calc(17 * var(--shelfd-px, 1px));
}
.shelfd-review-share-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shelfd-review-share-btn.is-primary {
  border-color: rgba(230, 199, 102, 0.5);
  background: rgba(230, 199, 102, 0.16);
  color: #F0DFA8;
}
/* Disabled until the image actually exists — offering Copy before there is
   anything to copy is how you get a silent no-op. */
.shelfd-review-share-btn:disabled { opacity: 0.4; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .shelfd-review-share,
  .shelfd-review-share-panel { transition: opacity 120ms ease; }
  .shelfd-review-share-panel { transform: none; }
  .shelfd-review-share-spinner { animation-duration: 2s; }
}