/* ==========================================================================
   Reviews & ratings
   Three reusable components: stars, rating summary, review card.
   ========================================================================== */

/* ---------- Stars ---------- */

.rating-stars { display: inline-flex; align-items: center; gap: 1px; line-height: 1; }
.rating-stars__star { color: var(--sf-border); }
.rating-stars__star.is-filled { color: var(--sf-amber); }

/* Half star: the amber fill is clipped to the left half, so a 4.5 reads
   as four and a half rather than rounding up to five. */
.rating-stars__star.is-half {
  background: linear-gradient(90deg, var(--sf-amber) 50%, var(--sf-border) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rating-stars--sm { font-size: var(--sf-text-sm); }
.rating-stars--md { font-size: var(--sf-text-lg); }
.rating-stars--lg { font-size: var(--sf-text-2xl); }

.rating-stars__value {
  margin-left: var(--sf-space-2);
  font-weight: var(--sf-weight-semibold);
  color: var(--sf-slate-900);
  font-size: var(--sf-text-sm);
}

.rating-stars__count {
  margin-left: var(--sf-space-2);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  color: var(--sf-slate-400);
}

/* ---------- Rating summary ---------- */

.rating-summary {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--sf-space-6);
  align-items: center;
  padding: var(--sf-space-5);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-surface);
  margin-bottom: var(--sf-space-6);
}

@media (max-width: 640px) {
  .rating-summary { grid-template-columns: 1fr; gap: var(--sf-space-4); }
}

.rating-summary__score { display: flex; flex-direction: column; align-items: center; gap: var(--sf-space-1); }

.rating-summary__average {
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-4xl);
  font-weight: var(--sf-weight-bold);
  line-height: 1;
  color: var(--sf-slate-900);
}

.rating-summary__count { font-size: var(--sf-text-sm); color: var(--sf-slate-600); }

.rating-summary__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sf-space-2); }

.rating-bar { display: grid; grid-template-columns: 4.5rem 1fr 2.5rem; gap: var(--sf-space-3); align-items: center; }
.rating-bar__label { font-size: var(--sf-text-xs); color: var(--sf-slate-600); }

.rating-bar__track {
  height: 8px;
  border-radius: var(--sf-radius-full);
  background: var(--sf-border);
  overflow: hidden;
}

.rating-bar__fill { display: block; height: 100%; background: var(--sf-amber); border-radius: inherit; }

.rating-bar__count {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  color: var(--sf-slate-400);
  text-align: right;
}

/* ---------- Review card ---------- */

.course-reviews__list { display: grid; gap: var(--sf-space-4); }
.course-reviews__subtitle { font-size: var(--sf-text-lg); margin: 0 0 var(--sf-space-3); }
.course-reviews__mine { margin-bottom: var(--sf-space-6); }

.course-reviews__ineligible,
.course-reviews__empty {
  font-size: var(--sf-text-sm);
  color: var(--sf-slate-600);
  padding: var(--sf-space-4);
  border: 1px dashed var(--sf-border);
  border-radius: var(--sf-radius-md);
}

.review-card {
  padding: var(--sf-space-5);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-surface);
}

.review-card.is-pending { border-style: dashed; background: var(--sf-amber-50, transparent); }

.review-card__header { display: flex; align-items: center; gap: var(--sf-space-3); margin-bottom: var(--sf-space-3); }
.review-card__avatar { border-radius: var(--sf-radius-full); flex-shrink: 0; }
.review-card__meta { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.review-card__author { font-weight: var(--sf-weight-medium); color: var(--sf-slate-900); }
.review-card__date { font-family: var(--sf-font-mono); font-size: var(--sf-text-xs); color: var(--sf-slate-400); }

.review-card__pending { font-size: var(--sf-text-sm); color: var(--sf-slate-600); margin-bottom: var(--sf-space-2); }
.review-card__title { font-size: var(--sf-text-base); margin: 0 0 var(--sf-space-2); }
.review-card__body { color: var(--sf-slate-700); font-size: var(--sf-text-sm); }

.review-card__response {
  margin-top: var(--sf-space-4);
  padding: var(--sf-space-4);
  border-left: 3px solid var(--sf-indigo);
  background: var(--sf-slate-50, rgba(0, 0, 0, .02));
  border-radius: 0 var(--sf-radius-md) var(--sf-radius-md) 0;
}

.review-card__response-label {
  display: block;
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-semibold);
  color: var(--sf-indigo);
  margin-bottom: var(--sf-space-1);
}

.review-card__response-body { font-size: var(--sf-text-sm); color: var(--sf-slate-700); }

/* ---------- Form ---------- */

.review-form {
  padding: var(--sf-space-5);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-surface);
  margin-bottom: var(--sf-space-6);
}

.review-form__field { margin-bottom: var(--sf-space-4); }
.review-form__label { display: block; font-size: var(--sf-text-sm); font-weight: var(--sf-weight-medium); margin-bottom: var(--sf-space-1); }
.review-form__field input,
.review-form__field textarea { width: 100%; }

/* Rendered right-to-left so the CSS sibling selector can highlight the
   chosen star and every star to its left, without any JavaScript. */
.review-form__rating {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sf-space-4);
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: var(--sf-space-1);
}

.review-form__rating legend { float: left; width: 100%; }
.review-form__star { cursor: pointer; font-size: var(--sf-text-2xl); color: var(--sf-border); line-height: 1; }
.review-form__star input { position: absolute; opacity: 0; width: 0; height: 0; }
.review-form__star:hover,
.review-form__star:hover ~ .review-form__star,
.review-form__star:has(input:checked),
.review-form__star:has(input:checked) ~ .review-form__star { color: var(--sf-amber); }
.review-form__star:has(input:focus-visible) { outline: 2px solid var(--sf-indigo); outline-offset: 2px; }

.review-form__status:empty { display: none; }
.review-form__status { margin-top: var(--sf-space-3); font-size: var(--sf-text-sm); }
.review-form__status.is-error { color: var(--sf-red-ink); }
.review-form__status.is-success { color: var(--sf-green); }

/* ==========================================================================
   Q&A / discussions
   Deliberately quiet: a question list is scanned, not admired. Structure
   and status carry the meaning, not colour or ornament.
   ========================================================================== */

.qa { margin-top: var(--sf-space-8); }
.qa__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-space-4); margin-bottom: var(--sf-space-4); }
.qa__title { font-size: var(--sf-text-xl); margin: 0; }
.qa__list { display: grid; gap: var(--sf-space-2); }

.qa__empty,
.qa__status:not(:empty) {
  font-size: var(--sf-text-sm);
  color: var(--sf-slate-600);
  padding: var(--sf-space-4);
  border: 1px dashed var(--sf-border);
  border-radius: var(--sf-radius-md);
}

.qa__status.is-error { color: var(--sf-red-ink); border-color: currentColor; }

/* ---------- Thread row ---------- */

.qa-thread {
  display: flex;
  gap: var(--sf-space-3);
  padding: var(--sf-space-4);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-surface);
}

.qa-thread.is-solved { border-color: var(--sf-green); }
.qa-thread.is-pending { border-style: dashed; }

.qa-thread__status {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--sf-radius-full);
  background: var(--sf-border);
  color: var(--sf-slate-600);
  font-size: var(--sf-text-sm);
}

.qa-thread.is-solved .qa-thread__status { background: var(--sf-green-100); color: var(--sf-green); }

.qa-thread__title { font-size: var(--sf-text-base); margin: 0 0 var(--sf-space-1); }

/* The whole title is the control, so the hit area matches what a
   reader perceives as clickable. */
.qa-thread__open {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--sf-slate-900);
  text-align: left; cursor: pointer;
}
.qa-thread__open:hover { color: var(--sf-indigo); }
.qa-thread__open:focus-visible { outline: 2px solid var(--sf-indigo); outline-offset: 2px; }

.qa-thread__meta,
.qa-reply__date {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  color: var(--sf-slate-400);
  margin: 0;
}

.qa-thread__badges { margin: var(--sf-space-2) 0 0; display: flex; gap: var(--sf-space-2); }
.qa-thread__badges:empty { display: none; }

/* ---------- Replies ---------- */

.qa__detail { margin-top: var(--sf-space-4); display: grid; gap: var(--sf-space-3); }

.qa-reply {
  padding: var(--sf-space-4);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  background: var(--sf-surface);
}

/* An instructor answer is the one a learner is scanning for, so it
   gets the only accent on the page. */
.qa-reply.is-instructor { border-left: 3px solid var(--sf-indigo); }
.qa-reply.is-solution { border-color: var(--sf-green); background: var(--sf-green-50, transparent); }

.qa-reply__header { display: flex; align-items: center; gap: var(--sf-space-2); flex-wrap: wrap; margin-bottom: var(--sf-space-2); }
.qa-reply__avatar { border-radius: var(--sf-radius-full); }
.qa-reply__author { font-weight: var(--sf-weight-medium); color: var(--sf-slate-900); }
.qa-reply__date { margin-left: auto; }
.qa-reply__content { font-size: var(--sf-text-sm); color: var(--sf-slate-700); }

.qa-reply__actions { display: flex; gap: var(--sf-space-3); margin-top: var(--sf-space-3); }

.qa-action {
  background: none; border: 0; padding: 0;
  font-family: var(--sf-font-mono); font-size: var(--sf-text-xs);
  color: var(--sf-slate-600); cursor: pointer;
}
.qa-action:hover { color: var(--sf-indigo); }
.qa-action--danger:hover { color: var(--sf-red-ink); }
.qa-action:focus-visible { outline: 2px solid var(--sf-indigo); outline-offset: 2px; }

/* ---------- Ask form ---------- */

.qa-ask {
  padding: var(--sf-space-5);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-surface);
  margin-bottom: var(--sf-space-4);
}

.qa-ask__field { margin-bottom: var(--sf-space-4); }
.qa-ask__field label { display: block; font-size: var(--sf-text-sm); font-weight: var(--sf-weight-medium); margin-bottom: var(--sf-space-1); }
.qa-ask__field input,
.qa-ask__field textarea { width: 100%; }