/* =============================================================================
   73-imported-review-page.css — v15.851

   The full-page reader for an IMPORTED review (IMDb, MyAnimeList, AniList,
   TMDB, Steam), opened from a row on a title's User Reviews page.

   Deliberately its own surface rather than a set of "when external" rules layered
   onto .mylist-media-review-page: that page is built around a Shelfd feed post —
   owner menu, replies, a like document keyed by postId — and none of it applies
   here. What an imported review has is a source, a body and a like key, so this
   holds exactly that and nothing it would have to hide.

   It reads as the same object as the Shelfd reader (identical topbar geometry,
   the same author-block → title → rating → body order, the same 320ms slide),
   because to the user the two are the same kind of screen.

   Its z-index is `--shelfd-review-reader-z`, the storey variable js/06d writes
   when a review reader opens — see the block comment on .mylist-media-review-page
   in 01-mylists-cards-episodes.css. Sharing the variable is what stops this page
   from opening underneath the reviews overlay that launched it.
   ============================================================================= */

body.imported-review-open { overflow: hidden; }

.imported-review-page {
  position: fixed;
  inset: 0;
  z-index: var(--shelfd-review-reader-z, 7200);
  background: #0f0f12;
  color: #f8f4ff;
  transform: translate3d(100%, 0, 0);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  overflow: hidden;
  font-family: 'Sohne', 'Söhne', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.00em;
}
.imported-review-page.is-open { transform: translate3d(0, 0, 0); }

.imported-review-shell {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.imported-review-topbar {
  flex: 0 0 auto;
  height: calc(var(--shelfd-safe-top, 0px) + 54px);
  padding: var(--shelfd-safe-top, 0px) 16px 0;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.imported-review-topbar > span:not(.imported-review-topbar-end) {
  justify-self: center;
  font-size: calc(15 * var(--shelfd-px, 1px));
  font-weight: 600;
}
.imported-review-topbar-end { width: 42px; height: 42px; }

.imported-review-back {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: #f8f4ff;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.imported-review-back svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
}
.imported-review-back:active { opacity: 0.6; }

.imported-review-content {
  flex: 1 1 auto;
  overflow-y: auto;
  /* The page never scrolls sideways. A single long token in a review body is
     enough to hand the user a horizontal axis they never asked for. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 18px 18px max(34px, env(safe-area-inset-bottom, 0px));
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.imported-review-content::-webkit-scrollbar { width: 0; height: 0; display: none; }

.imported-review-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.imported-review-main { min-width: 0; }

.imported-review-author {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.imported-review-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.06);
}
.imported-review-author > div { min-width: 0; }
.imported-review-author strong {
  display: block;
  color: #fff;
  font-size: calc(14 * var(--shelfd-px, 1px));
  font-weight: 600;
  overflow-wrap: anywhere;
}
.imported-review-author span {
  display: block;
  margin-top: 2px;
  color: rgba(232,226,245,0.55);
  font-size: calc(12 * var(--shelfd-px, 1px));
  font-weight: 400;
}

.imported-review-hero h1 {
  margin: 13px 0 0;
  color: #fff;
  font-size: calc(23 * var(--shelfd-px, 1px));
  line-height: 1.1;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.imported-review-year {
  color: rgba(232,226,245,0.5);
  font-size: calc(15 * var(--shelfd-px, 1px));
  font-weight: 400;
}

/* v15.855: "S2 E4 - Episode Title" for an IMDb episode roll-up review. Lavender
   and sitting directly under the series title, so the scope of what is being read
   is settled before the first line of the review. */
.imported-review-context {
  margin-top: 7px;
  color: #a78bfa;
  font-size: calc(13 * var(--shelfd-px, 1px));
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* v15.854: geometry and colour taken deliberately from the Shelfd reader's own
   rating row (.mylist-review-rating in 01-mylists-cards-episodes.css) - 27px
   #f6c84c glyphs, 1px between them, 10px across to a white 16px/500 label. The
   two readers present the same kind of claim and must not read as two different
   components. Held as its own selectors rather than borrowing that class, which
   arrives with a page-wide `* { font-weight: 500 !important }` cap and a set of
   owner-only rules that have no meaning here. */
.imported-review-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.imported-review-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #f6c84c;
  line-height: 1;
}
.imported-review-star {
  font-size: calc(27 * var(--shelfd-px, 1px));
  line-height: 1;
}
.imported-review-rating-label {
  color: #fff;
  font: 500 calc(16 * var(--shelfd-px, 1px))/1 'Sohne', 'Söhne', 'DM Sans', sans-serif;
}

.imported-review-verdict {
  display: inline-flex;
  margin-top: 9px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: calc(12.5 * var(--shelfd-px, 1px));
  font-weight: 600;
}
.imported-review-verdict.is-rec { background: rgba(110,231,183,0.14); color: #6ee7b7; }
.imported-review-verdict.is-notrec { background: rgba(255,107,127,0.14); color: #ff6b7f; }

.imported-review-poster {
  width: 92px;
  aspect-ratio: 2 / 3;
  border-radius: 7px;
  background-color: rgba(255,255,255,0.06);
  background-size: cover;
  background-position: center;
}

.imported-review-body {
  padding: 18px 0 4px;
}
.imported-review-body p {
  margin: 0;
  color: rgba(248,246,255,0.92);
  font-size: calc(15.5 * var(--shelfd-px, 1px));
  line-height: 1.52;
  font-weight: 400;
  /* pre-wrap keeps the author's paragraph breaks; anywhere stops one run-on
     token from widening the column past the page. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.imported-review-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.imported-review-source {
  color: rgba(232,226,245,0.45);
  font-size: calc(12.5 * var(--shelfd-px, 1px));
  font-weight: 400;
}