/* review-page.css -- styles for the server-rendered review pages.
   The static review page: the reading sheet's interior, minus its overlay-ness. */
.page { position:relative; z-index:1; min-height:100dvh; display:flex; flex-direction:column; }
.page-main { flex:1; padding:calc(var(--h-topbar) + clamp(16px,4vh,40px)) var(--space-4) var(--space-12);
  display:flex; justify-content:center; }
.sheet.static-sheet { position:static; margin:0; align-self:auto; max-height:none; animation:none; display:block; }
.static-sheet .sheet-body { overflow:visible; }
.rp-brand { text-decoration:none; color:inherit; }
.rp-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* The way back into the archive is the first thing on the page, not the last --
   someone who landed here from a search result has no other route in. */
.back-all { display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-size:13px; font-weight:var(--w-medium); color:var(--color-accent); margin-bottom:var(--space-3); }
.back-all:hover { text-decoration:underline; }
.crumbs { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12px; color:var(--color-text-secondary); margin-bottom:var(--space-6); }
.crumbs .sep { color:var(--color-text-disabled); }

.sheet-credit { font-size:13px; color:var(--color-text-secondary); margin:var(--space-3) 0 0; }
.sheet-credit b { color:var(--color-text-primary); font-weight:var(--w-medium); }

/* Replaces the modal's close button: somewhere to go next. */
.explore { margin-top:var(--space-12); padding-top:var(--space-6); border-top:1px solid var(--color-border-subtle); }
.explore h2 { margin:var(--space-6) 0 var(--space-3); font-size:13px; font-weight:var(--w-semibold);
  letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-tertiary); }
.explore h2:first-child { margin-top:0; }
.xlink { display:flex; gap:var(--space-3); align-items:flex-start; text-decoration:none; color:inherit;
  padding:var(--space-3); margin:0 calc(var(--space-3) * -1);
  border-radius:var(--radius-glass-md); transition:background var(--dur-fast) var(--ease); }
.xlink:hover { background:var(--color-bg-inset); }
.x-thumb { flex:none; width:72px; height:72px; border-radius:var(--radius-glass-sm);
  overflow:hidden; background:var(--color-bg-inset); }
.x-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.x-text { min-width:0; display:flex; flex-direction:column; gap:3px; }
.x-kicker { font-size:11px; font-weight:var(--w-semibold); letter-spacing:.03em;
  text-transform:uppercase; color:var(--color-accent); }
.x-title { font-size:14px; font-weight:var(--w-medium); color:var(--color-text-primary); }
/* two full lines, clamped on a real line break rather than a character count */
.x-snip { font-size:13px; line-height:1.55; color:var(--color-text-secondary);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; max-height:calc(1.55em * 2); }
.chips { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.chip { font-size:12px; text-decoration:none; color:var(--color-text-secondary);
  background:var(--color-bg-inset); border-radius:var(--radius-pill); padding:5px 12px;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.chip:hover { background:var(--color-accent-subtle); color:var(--color-accent-pressed); }

/* The sheet's facet links and genre pills are real <a href> so the same markup
   works with no JavaScript. In the app they are intercepted, so they must not
   look or behave like navigation. */
.sheet-facts .link, .sheet-tags .tag-link, .crumbs a { text-decoration:none; }
.sheet-facts .link b { color:var(--color-accent); }
.sheet-facts .link:hover b { text-decoration:underline; }
.crumbs a { color:var(--color-text-secondary); }
.crumbs a:hover { color:var(--color-accent); text-decoration:underline; }

/* ---- feedback about one review ----------------------------------------
   Rendered into the reading sheet (see openFeedback) rather than a second
   modal over it. Reuses .contact-form / .field / .form-row wholesale; only
   the heading block above the form is new. */
.fb-title { font-size:20px; font-weight:var(--w-semibold); letter-spacing:-.01em; margin:0; }
.fb-sub { font-size:13px; color:var(--color-text-secondary); margin:4px 0 var(--space-6); }
.fb-intro {
  font-size:15px; line-height:1.6; color:var(--color-text-primary);
  margin:0 0 var(--space-6); padding-top:var(--space-6);
  border-top:1px solid var(--color-border-subtle); max-width:60ch;
}
.field i { font-style:normal; color:var(--color-text-tertiary); font-weight:var(--w-regular); }

/* .contact-form is a grid, so a lone button child stretches to the full 520px
   column. This is the only place a button is the form's sole child. */
.fb-back { justify-self:start; }