/* Preview-only review panel. Uses the page's own tokens so it follows light and dark. */
.rv-open {
  position: fixed; z-index: 30; inset-block-end: max(1rem, env(safe-area-inset-bottom)); inset-inline-end: 1rem;
  min-block-size: 48px; padding-inline: 1.25rem; border: 0; border-radius: 0;
  background: var(--act); color: var(--on-act); font: inherit; font-weight: 700; font-size: 1.0625rem; cursor: pointer;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.22);
}
.rv-open:focus-visible, .rv-sheet :focus-visible { outline: 3px solid var(--act); outline-offset: 3px; }
.rv-open:focus-visible { outline-color: var(--text); }

.rv-sheet {
  margin: 0; margin-inline-start: auto; inset-block: 0; block-size: 100dvh; max-block-size: 100dvh;
  inline-size: min(30rem, 100%); max-inline-size: 100%; padding: 1.5rem 1.25rem 2rem; border: 0;
  border-inline-start: 1px solid var(--rule); background: var(--ground); color: var(--text);
  font: inherit; font-size: 1.0625rem; line-height: 1.7; overflow-y: auto; overscroll-behavior: contain;
}
.rv-sheet, .rv-sheet * { box-sizing: border-box; }
.rv-sheet { overflow-x: hidden; }
.rv-sheet::backdrop { background: rgb(0 0 0 / 0.35); }
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rv-top h2 { margin: 0; font-size: 1.375rem; }
.rv-sheet h3 { margin-block: 2rem 0.75rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--rule); font-size: 1.125rem; }
.rv-lead { margin-block: 0.5rem 1.25rem; color: var(--muted); }
.rv-close {
  min-block-size: 44px; padding-inline: 0.75rem; border: 1px solid var(--rule); background: transparent; color: inherit; font: inherit; cursor: pointer;
}

.rv-form { display: grid; gap: 0.4rem; }
.rv-form > label { font-weight: 700; margin-block-start: 0.6rem; }
.rv-form select, .rv-form textarea, .rv-form input[type="text"] {
  inline-size: 100%; min-block-size: 44px; padding: 0.5rem 0.75rem; border: 1px solid var(--muted); border-radius: 0;
  background: var(--ground); color: var(--text); font: inherit;
}
.rv-form textarea { resize: vertical; }
.rv-verdicts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0; padding: 0; border: 0; }
.rv-verdicts legend { font-weight: 700; margin-block-end: 0.4rem; padding: 0; }
.rv-verdicts label {
  display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 44px; padding-inline: 0.85rem;
  border: 1px solid var(--rule); cursor: pointer;
}
.rv-verdicts label:has(:checked) { border-color: var(--act); box-shadow: inset 0 0 0 1px var(--act); font-weight: 700; }
.rv-verdicts input { accent-color: var(--act); }
.rv-form .rv-trap { position: absolute; inline-size: 1px; min-block-size: 0; block-size: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
.rv-send {
  justify-self: start; margin-block-start: 0.9rem; min-block-size: 48px; padding-inline: 1.25rem; border: 0;
  background: var(--act); color: var(--on-act); font: inherit; font-weight: 700; cursor: pointer;
}
.rv-send:disabled { opacity: 0.6; cursor: progress; }
.rv-status { min-block-size: 1.7em; margin: 0.25rem 0 0; }

.rv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.rv-item { padding: 0.75rem 0.9rem; border: 1px solid var(--rule); border-inline-start-width: 4px; }
.rv-like { border-inline-start-color: var(--act); }
.rv-dislike { border-inline-start-color: var(--text); }
.rv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin: 0; font-size: 1rem; color: var(--muted); }
.rv-go { padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.rv-go:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.rv-tag { color: var(--text); }
.rv-text { margin: 0.35rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-empty { color: var(--muted); }

@media print { .rv-open { display: none; } }