/* Shared review styles (cards' building blocks + the reader overlay), used by both the main page
   and /reviews/. Page layout lives in reviews.css (only loaded on /reviews/). */
/* Colors come from the shared design system (/shared/huynh-ui.css), which also handles dark mode;
   the fallbacks only matter if that file fails to load. */
:root {
  --rv-bg: var(--hu-bg, #f6faf7);
  --rv-surface: var(--hu-surface, #ffffff);
  --rv-border: var(--hu-border, #dee2e6);
  --rv-text: var(--hu-text, #212529);
  --rv-muted: var(--hu-muted, #6c757d);
  --rv-accent: var(--hu-accent, #55c278);
  --rv-accent-dark: var(--hu-accent-dark, #48a869);
  --rv-chip: var(--hu-chip, #eef6f1);
  --rv-chip-border: var(--hu-chip-border, #cfe8d8);
  --rv-shadow: var(--hu-shadow, 0 2px 10px rgba(33, 37, 41, 0.06));
}

/* Buttons and chips */
.rv-btn {
  border: 2px solid var(--rv-accent);
  background: var(--rv-surface);
  color: var(--rv-accent-dark);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.rv-btn-small {
  padding: 0.15rem 0.75rem;
  font-size: 0.8rem;
}
.rv-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.rv-chip {
  border: 1px solid var(--rv-chip-border);
  background: var(--rv-chip);
  color: var(--rv-text);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
}
span.rv-chip {
  cursor: default;
}
.rv-chip-small {
  font-size: 0.72rem;
  padding: 0.05rem 0.55rem;
}
.rv-btn:focus-visible,
.rv-chip:focus-visible,
.rv-thumb:focus-visible,
.rv-reader-close:focus-visible {
  outline: 3px solid var(--rv-accent);
  outline-offset: 2px;
}

/* Thumbnail -> player */
.rv-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  cursor: pointer;
}
.rv-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s ease;
}
.rv-thumb:hover img {
  opacity: 0.85;
}
.rv-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

/* Header: title, rating, meta */
.rv-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}
.rv-card-title,
.rv-reader .rv-card-title {
  color: var(--rv-text);
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
}
.rv-card-title:hover,
.rv-reader .rv-card-title:hover {
  color: var(--rv-accent-dark);
  text-decoration: underline;
}
.rv-rating {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.2;
  padding: 0.25rem 0.7rem;
  border-radius: 0.6rem;
  color: #fff;
}
.rv-rating-great { background: #2f9e5a; }
.rv-rating-good  { background: #3b82c4; }
.rv-rating-ok    { background: #c98516; }
.rv-rating-low   { background: #c0392b; }
.rv-meta {
  color: var(--rv-muted);
  font-size: 0.8rem;
}

/* Review text: plain, or formatted (sanitized Quill HTML) */
.rv-text {
  margin: 0;
  white-space: pre-line;
  font-size: 0.92rem;
  color: var(--rv-text);
}
.ql-editor.rv-rich {
  padding: 0;
  height: auto;
  overflow: visible;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--rv-text);
  cursor: auto;
}
.rv-rich p,
.rv-rich ol,
.rv-rich ul {
  margin: 0 0 0.5rem;
}
.rv-rich h2,
.rv-rich h3 {
  font-family: "Muli", sans-serif;
  text-transform: none;
  color: var(--rv-text);
  margin: 0.6rem 0 0.35rem;
}
.rv-rich h2 { font-size: 1.15rem; font-weight: 800; }
.rv-rich h3 { font-size: 1rem; font-weight: 800; }
.rv-rich blockquote {
  border-left: 4px solid var(--rv-accent);
  padding-left: 0.75rem;
  margin: 0.5rem 0;
  color: var(--rv-muted);
}
.rv-rich a {
  color: var(--rv-accent-dark);
  text-decoration: underline;
}
.ql-editor .ql-firstline-1 {
  text-indent: 2em;
}

/* Inline spoilers: blacked out until clicked */
.rv-rich .ql-spoiler {
  background: var(--rv-text);
  color: transparent;
  border-radius: 0.25rem;
  padding: 0 0.15rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.rv-rich .ql-spoiler a {
  color: transparent;
  pointer-events: none;
}
.rv-rich .ql-spoiler.rv-revealed {
  background: var(--rv-chip);
  color: inherit;
  user-select: text;
}
.rv-rich .ql-spoiler.rv-revealed a {
  color: var(--rv-accent-dark);
  pointer-events: auto;
}
.rv-rich .ql-spoiler:focus-visible {
  outline: 3px solid var(--rv-accent);
  outline-offset: 1px;
}

/* Whole-review spoiler cover */
.rv-spoiler-hidden > :not(.rv-spoiler-cover) {
  display: none !important;
}
.rv-spoiler-cover {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 2px dashed #c98516;
  border-radius: 0.6rem;
  background: rgba(242, 169, 59, 0.12);
  color: var(--rv-text);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.rv-spoiler-cover:hover {
  background: rgba(242, 169, 59, 0.22);
}

/* Dialogs (base) */
.rv-dialog {
  border: 1px solid var(--rv-border);
  border-radius: 1rem;
  background: var(--rv-surface);
  color: var(--rv-text);
  padding: 1.25rem 1.4rem;
  width: min(26rem, calc(100vw - 32px));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.rv-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

/* Reader: the full review in an overlay window */
.rv-dialog.rv-reader {
  padding: 0;
  width: min(50rem, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.rv-reader-close {
  position: sticky;
  top: 0.6rem;
  float: right;
  margin: 0.6rem 0.6rem -3rem 0;
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.rv-reader-close:hover {
  background: rgba(0, 0, 0, 0.8);
}
.rv-reader-body {
  padding: 1.1rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.rv-reader .rv-reader-title {
  margin: 0;
  font-family: "Muli", sans-serif;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.35rem;
  line-height: 1.3;
}
.rv-reader .rv-rich,
.rv-reader .rv-text {
  font-size: 1rem;
  line-height: 1.6;
}
.rv-reader-edit {
  align-self: flex-start;
}
body.rv-noscroll {
  overflow: hidden;
}
@media (max-width: 540px) {
  .rv-dialog.rv-reader {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    margin: 0;
  }
  .rv-reader-body {
    padding: 1rem;
  }
}