/* public/shared/course-review.css — the course review form's styles.
 *
 * MOVED VERBATIM from public/dashboard/quiz.html, which now links this file,
 * so the pass-screen pop-up and anything else that shows the form share one
 * copy. The page supplies the brand variables (--ink, --line, --blue …) and
 * the .hidden and .btn-blue classes this file relies on.
 */
/* ── The review prompt ──────────────────────────────────────────────
   Modal per the shared pattern: fixed, inset 0, rgba(0,0,0,.5), z-index
   9999. */
.rv-back { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999;
           display: flex; align-items: center; justify-content: center; padding: 20px; }
.rv-box { background: var(--white); border-radius: var(--radius); padding: 26px 26px 20px;
          max-width: 430px; width: 100%; box-shadow: 0 18px 50px rgba(9,16,31,.28); }
/* .rv-card is the same form inline on the course page (course.html), inside
   that page's own .card — so only the heading needs naming twice. */
.rv-box h2, .rv-card h2 { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; margin-bottom: 7px; }
.rv-lede { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; }

.rv-stars { display: flex; gap: 4px; margin-bottom: 14px; }
.rv-star { background: none; border: none; cursor: pointer; font-size: 29px; line-height: 1;
           padding: 0 3px; color: var(--line); font-family: inherit; transition: color .12s; }
.rv-star:hover { color: #FCD34D; }
.rv-star.on { color: #F59E0B; }

/* A REAL LABEL, NOT A PLACEHOLDER. A placeholder disappears on focus —
   it vanishes at the exact moment somebody starts to answer it, leaving an
   empty box and no question. */
.rv-label { display: block; font-size: 13px; font-weight: 700; color: var(--ink);
            margin-bottom: 7px; text-align: left; }

.rv-text { width: 100%; font-family: var(--font); font-size: 13px; color: var(--ink);
           border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px;
           line-height: 1.55; resize: vertical; }
.rv-text:focus { outline: none; border-color: var(--blue); }

/* Stacked and centred, NOT a two-button row. The CTA is the only button in
   the box; declining is a text link beneath it.
   Two equally weighted buttons turn saying no into a decision with
   consequences, and this is a request rather than a gate — the quieter
   answer should be the quieter control. */
.rv-actions { display: flex; flex-direction: column; align-items: center; gap: 11px; margin-top: 18px; }
.rv-no { background: none; border: none; font-family: var(--font); font-size: 12.5px;
         color: var(--muted); cursor: pointer; text-decoration: underline; padding: 3px 6px; }
.rv-no:hover { color: var(--soft); }
.rv-err { font-size: 12.5px; color: var(--red); line-height: 1.5; margin-top: 10px; text-align: center; }