/* Video Reviews page (/reviews/). Reuses the main site's styles.css (fonts, Bootstrap base, theme
   toggle) but has no sidebar, so the sidebar padding from styles.css is cancelled here. Shared review
   pieces (tokens, rating, rich text, spoilers, reader overlay) live in review-reader.css. */

html body {
  padding: 0;
  background: var(--rv-bg);
  color: var(--rv-text);
}
.rv-wrap {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.25rem 16px 0;
}

/* Buttons and inputs (base .rv-btn is in review-reader.css) */
.rv-btn-primary {
  background: var(--rv-accent);
  border-color: var(--rv-accent);
  color: #fff;
}
[data-theme="dark"] .rv-btn-primary {
  color: #10241a;
}
.rv-btn-danger {
  border-color: #dc3545;
  color: #dc3545;
}
.rv-input:focus-visible {
  outline: 3px solid var(--rv-accent);
  outline-offset: 2px;
}
.rv-input {
  width: 100%;
  border: 1px solid var(--rv-border);
  background: var(--rv-surface);
  color: var(--rv-text);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
}

/* Toolbar */
.rv-toolbar {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.rv-select {
  width: auto;
  flex: 0 0 auto;
}
.rv-tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.rv-chip-active {
  background: var(--rv-accent);
  border-color: var(--rv-accent);
  color: #fff;
}
.rv-status {
  color: var(--rv-muted);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

/* Review grid and cards */
/* 4 x 4 grid on desktop (16 reviews per page), 3 / 2 / 1 columns on smaller screens */
.rv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  padding-bottom: 1.5rem;
}
@media (max-width: 1199px) {
  .rv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .rv-grid { grid-template-columns: 1fr; }
}
.rv-grid {
  scroll-margin-top: 1rem;
}
.rv-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-bottom: 3rem;
  color: var(--rv-muted);
  font-size: 0.9rem;
}
.rv-pager[hidden] {
  display: none;
}
.rv-pager .rv-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.rv-card {
  display: flex;
  flex-direction: column;
  background: var(--rv-surface);
  border: 1px solid var(--rv-border);
  border-radius: 0.9rem;
  overflow: hidden;
  box-shadow: var(--rv-shadow);
  scroll-margin-top: 1rem;
  transition: box-shadow 0.3s ease;
}
.rv-highlight {
  box-shadow: 0 0 0 3px var(--rv-accent), var(--rv-shadow);
}
.rv-body {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}
.rv-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv-body .rv-rich.rv-clamped {
  display: block;
  max-height: 8.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.rv-more {
  align-self: flex-start;
  border: 0;
  background: none;
  color: var(--rv-accent-dark);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0;
  cursor: pointer;
}
.rv-edit {
  align-self: flex-end;
  margin-top: auto;
}

/* Editor (Quill "snow" theme) in the add/edit dialog */
.rv-check {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}
.rv-check small {
  font-weight: 400;
  color: var(--rv-muted);
}
.rv-field {
  margin-bottom: 0.7rem;
}
.rv-field-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}
.rv-field-label small {
  font-weight: 400;
  color: var(--rv-muted);
}
.rv-rich-editor {
  min-height: 12rem;
  max-height: 45vh;
  overflow-y: auto;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--rv-surface);
  color: var(--rv-text);
}
.rv-rich-editor .ql-spoiler {
  background: var(--rv-chip);
  color: inherit;
  padding: 0;
  border-bottom: 2px dashed #c98516;
}
.rv-dialog .ql-toolbar.ql-snow,
.rv-dialog .ql-container.ql-snow {
  border-color: var(--rv-border);
}
.rv-dialog .ql-toolbar.ql-snow {
  border-radius: 0.5rem 0.5rem 0 0;
  background: var(--rv-chip);
}
.rv-dialog .ql-container.ql-snow {
  border-radius: 0 0 0.5rem 0.5rem;
}
.rv-dialog .ql-editor.ql-blank::before {
  color: var(--rv-muted);
}
[data-theme="dark"] .rv-dialog .ql-snow .ql-stroke {
  stroke: var(--rv-text);
}
[data-theme="dark"] .rv-dialog .ql-snow .ql-fill {
  fill: var(--rv-text);
}
[data-theme="dark"] .rv-dialog .ql-snow .ql-picker,
[data-theme="dark"] .rv-dialog .ql-snow .ql-picker-label {
  color: var(--rv-text);
}
[data-theme="dark"] .rv-dialog .ql-snow .ql-picker-options,
[data-theme="dark"] .rv-dialog .ql-snow .ql-tooltip {
  background: var(--rv-surface);
  color: var(--rv-text);
  border-color: var(--rv-border);
}
[data-theme="dark"] .rv-dialog .ql-snow .ql-tooltip input[type="text"] {
  background: var(--rv-bg);
  color: var(--rv-text);
  border-color: var(--rv-border);
}
.rv-dialog .ql-snow .ql-tooltip {
  z-index: 5;
}

/* Form dialogs (log in, add/edit) */
.rv-dialog-wide {
  width: min(40rem, calc(100vw - 32px));
}
.rv-dialog h2 {
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
  color: var(--rv-text);
}
.rv-dialog label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.7rem;
  color: var(--rv-text);
}
.rv-dialog label .rv-input {
  margin-top: 0.25rem;
  font-weight: 400;
}
.rv-dialog label small {
  font-weight: 400;
  color: var(--rv-muted);
}
.rv-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 540px) {
  .rv-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.rv-preview {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.8rem;
  padding: 0.5rem;
  border: 1px solid var(--rv-border);
  border-radius: 0.6rem;
}
.rv-preview img {
  width: 8rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.4rem;
}
.rv-preview strong,
.rv-preview span {
  display: block;
  font-size: 0.85rem;
}
.rv-preview span {
  color: var(--rv-muted);
}
.rv-dialog-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.rv-spacer {
  flex: 1;
}
.rv-error {
  color: #dc3545;
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
}