/* Learner reviews. Shared by the learner portal, the admin console and the public pages.
   Colours come from the tokens each area already defines, so dark mode follows along. */

.rv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- stars ---------- */
.rv-stars { display: inline-flex; gap: 2px; line-height: 0; vertical-align: middle; }
.rv-stars svg { width: 16px; height: 16px; stroke-width: 1.5; stroke-linejoin: round; }
.rv-stars .on { fill: #e8a317; stroke: #e8a317; }
.rv-stars .off { fill: none; stroke: var(--line-2, #cfd8e6); }
.rv-stars-lg svg { width: 22px; height: 22px; }

/* ---------- the review form ---------- */
.rv-form { max-width: 720px; }
.rv-form textarea { min-height: 150px; resize: vertical; }

.rv-rate, .rv-names { border: 0; padding: 0; margin: 0; min-width: 0; }
.rv-rate legend, .rv-names legend { font-weight: 600; padding: 0; margin-bottom: 8px; }

.rv-rate-row { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
/* The portal gives every input full width and a 44px height; the radios below must stay out of that. */
.rv-form .rv-rate input[type=radio] {
  position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; border: 0;
}
.rv-rate label { cursor: pointer; line-height: 0; padding: 4px; border-radius: 8px; }
.rv-rate label svg {
  width: 36px; height: 36px; fill: none; stroke: var(--line-2, #cfd8e6);
  stroke-width: 1.5; stroke-linejoin: round; transition: fill .12s, stroke .12s;
}
/* Row order is reversed, so "later siblings" are the lower stars: checking or hovering star 4 lights 4, 3, 2 and 1. */
.rv-rate input:checked ~ label svg,
.rv-rate label:hover svg,
.rv-rate label:hover ~ label svg { fill: #e8a317; stroke: #e8a317; }
.rv-rate input:focus-visible + label { box-shadow: var(--focus, 0 0 0 3px rgba(26, 77, 216, 0.28)); }

.rv-names { display: grid; gap: 8px; }
.rv-name-opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer;
  border: 1px solid var(--line, #e2e8f1); border-radius: var(--r, 10px); background: var(--surface, #fff);
}
.rv-form .rv-name-opt input[type=radio] {
  flex: none; width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0;
  accent-color: var(--brand, #1a4dd8);
}
.rv-name-opt:has(input:checked) { border-color: var(--brand, #1a4dd8); background: var(--brand-tint, #ebf0fd); }
.rv-name-opt:has(input:focus-visible) { box-shadow: var(--focus, 0 0 0 3px rgba(26, 77, 216, 0.28)); }

.rv-form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rv-form-foot .hint { margin: 0; }

/* ---------- the learner's own reviews ---------- */
.rv-todo { list-style: none; margin: 0; padding: 0; }
.rv-todo li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid var(--line, #e2e8f1);
}
.rv-todo li:first-child { border-top: 0; padding-top: 4px; }
.rv-todo li > div { display: grid; gap: 2px; }

.rv-mine { display: grid; gap: 16px; }
.rv-item { padding: 18px 20px; border: 1px solid var(--line, #e2e8f1); border-radius: var(--r, 10px); background: var(--surface, #fff); }
.rv-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rv-item-head h3 { margin: 0 0 6px; font-size: 1.02rem; }
.rv-item-title { margin: 14px 0 0; font-weight: 650; }
.rv-item .notice { margin: 12px 0 0; }
.rv-item-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rv-item-actions form { margin: 0; }

/* ---------- review text ---------- */
.rv-body { margin: 8px 0 0; max-width: 70ch; line-height: 1.6; color: var(--ink-2, #33415c); }

/* ---------- public: summary and cards ---------- */
.rv-section { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line, #e2e8f1); }
.rv-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.rv-summary h2 { margin: 0; }
.rv-avg { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted, #5d6a82); }
.rv-avg strong { font-size: 2rem; line-height: 1; letter-spacing: -0.02em; color: var(--ink, #0b1b3f); }

.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.rv-card {
  display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 22px;
  background: var(--surface, #fff); border: 1px solid var(--line, #e2e8f1); border-radius: 14px;
}
.rv-card-title { margin: 0; font-weight: 650; color: var(--ink, #0b1b3f); }
.rv-card blockquote { margin: 0; }
.rv-card .rv-body { margin: 0; }
.rv-card figcaption { display: grid; gap: 2px; margin-top: auto; padding-top: 10px; font-size: 0.9rem; color: var(--muted, #5d6a82); }
.rv-card figcaption strong { color: var(--ink, #0b1b3f); }
.rv-card figcaption a { color: var(--brand, #1a4dd8); text-decoration: none; }
.rv-card figcaption a:hover { text-decoration: underline; }

/* ---------- admin queue ---------- */
.rv-admin .section-heading-row { align-items: flex-start; }
.rv-course { margin-left: 10px; font-weight: 600; color: var(--ink, #0b1b3f); text-decoration: none; }
.rv-course:hover { text-decoration: underline; }
.rv-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-title { margin: 14px 0 0; font-weight: 650; }
.rv-meta { margin: 14px 0 0; font-size: 0.88rem; line-height: 1.6; }
.rv-actions {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line, #e2e8f1);
}
.rv-actions form { margin: 0; }
.rv-reject summary { list-style: none; cursor: pointer; }
.rv-reject summary::-webkit-details-marker { display: none; }
.rv-reject[open] { flex-basis: 100%; }
.rv-reject form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 10px; }
.rv-reason { display: grid; flex: 1 1 280px; gap: 4px; font-size: 0.85rem; }
.rv-reason input {
  padding: 8px 10px; font: inherit; color: var(--ink, #0b1b3f);
  background: var(--surface, #fff); border: 1px solid var(--line-2, #cfd8e6); border-radius: 8px;
}
.rv-danger { color: var(--danger, #b9391f); }

@media (max-width: 640px) {
  .rv-rate label svg { width: 44px; height: 44px; }
  .rv-item-head { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-rate label svg { transition: none; }
}

.rv-item .hint { margin: 6px 0 0; }