/* «رأيك» (Task feedback, part a1): «هل كان الشرح واضحاً؟» at the end of a solution (components/explanation-vote.js), and
   the monthly question on the home (components/monthly-card.js); since part a2, the stars (components/rating-form.js) on
   a lecture's page and in the course page's «القاعة»; since part b1, the answers as the staff read them: a question's
   votes in its «إحصاءات الطلاب», the stars in «إحصاءات الدفعة», and their lines with «من كتب هذا؟» for admins
   (components/feedback-lines.js). Colours and sizes from tokens.css; light and dark. */

/* ── «هل كان الشرح واضحاً؟» ──────────────────────────────────────────────────────────────────────────────────── */

.explain-vote {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.explain-vote-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.explain-vote-ask {
  margin: 0;
  font-weight: 700;
}

.explain-vote-buttons {
  display: inline-flex;
  gap: var(--space-2);
}

/* (small, as «احفظ للمراجعة» and «بلاغ عن مشكلة» near it) */
.explain-vote-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-small);
}

/* pressed while it's his vote, its icon filled (as «احفظ للمراجعة» pressed) */
.explain-vote-button[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-info-soft);
  color: var(--color-primary);
  font-weight: 700;
}

.explain-vote-button[aria-pressed="true"] .icon {
  fill: currentColor;
}

/* 👎 is 👍 turned over */
.explain-vote-turned {
  transform: scaleY(-1);
}

.explain-vote[aria-busy="true"] .explain-vote-buttons {
  opacity: 0.6;
}

/* «ما الذي لم يكن واضحاً؟», with «لا» */
.explain-vote-why {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.explain-vote-label {
  font-size: var(--font-size-small);
  font-weight: 700;
}

.explain-vote-optional {
  color: var(--color-muted);
  font-weight: 400;
}

.explain-vote-input {
  resize: vertical;
}

.explain-vote-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* «تعديل», «اكتب ما لم يكن واضحاً» and «إلغاء»: words, not boxes */
.explain-vote-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: var(--font-size-small);
  text-decoration: underline;
  cursor: pointer;
}

/* his line once sent */
.explain-vote-kept {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.explain-vote-your {
  font-weight: 700;
}

.explain-vote-text {
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* what the server said: always there, so a screen reader hears it change (empty, it takes no room) */
.explain-vote-said {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.explain-vote-said:not(:empty) {
  margin-block-start: var(--space-2);
}

/* ── The monthly question on the home ─────────────────────────────────────────────────────────────────────────── */

/* (Task indoor, part c: a card as the home's others, its title the kit's) */
.monthly-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.monthly-card h2 {
  margin: 0;
  font-size: var(--font-size-card-title);
  line-height: 1.6;
}

.monthly-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.monthly-scale {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.monthly-ask {
  margin-block-end: var(--space-2);
  padding: 0;
  font-weight: 700;
}

/* 0 to 10 in one row; two rows on a narrow phone */
.monthly-scores {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: var(--space-1);
}

.monthly-score {
  position: relative;
  display: flex;
  cursor: pointer;
}

/* the radio is the label's box: hidden, still the keyboard's */
.monthly-score-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.monthly-score-box {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control-height);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-weight: 700;
}

.monthly-score:hover .monthly-score-box {
  border-color: var(--color-primary);
}

.monthly-score-input:focus-visible + .monthly-score-box {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.monthly-score-input:checked + .monthly-score-box {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* the ends' words under the scale: 0 at the start, 10 at the end */
.monthly-ends {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.monthly-why {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.monthly-why .explain-vote-optional {
  font-weight: 400;
}

.monthly-line {
  resize: vertical;
  font-weight: 400;
}

.monthly-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.monthly-said {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.monthly-thanks {
  margin: 0;
  color: var(--color-success);
  font-weight: 700;
}

@media (max-width: 26rem) {
  .monthly-scores {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ── The stars (part a2) ─────────────────────────────────────────────────────────────────────────────────────────── */

/* the card: on the lecture's page, «كيف كانت المحاضرة؟»; in «القاعة», «رأيك» with each ask under it */
.rate-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-inline-start: 4px solid var(--color-star);
}

.rate-card > .crs-status-title {
  margin: 0;
}

.rate-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.rate-list > .rate + .rate {
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.rate {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rate-title {
  margin: 0;
  font-size: var(--font-size-card-title);
}

.rate-sub,
.rate-note {
  margin: 0;
  color: var(--color-muted);
}

.rate-note {
  font-size: var(--font-size-small);
}

.rate-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rate-scale {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.rate-stars-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

/* 1 to 5 from the start (the right), lit up to the one chosen or pointed at */
.rate-stars {
  display: inline-flex;
  gap: var(--space-1);
}

.rate-star {
  position: relative;
  display: flex;
  cursor: pointer;
}

/* the radio is the star's: hidden, still the keyboard's */
.rate-star-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.rate-star-box {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  border-radius: var(--radius);
  color: var(--color-muted);
}

.rate-star-box .icon {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

.rate-star.is-on .rate-star-box {
  color: var(--color-star);
}

.rate-star.is-on .icon {
  fill: currentColor;
}

.rate-star-input:focus-visible + .rate-star-box {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* the star chosen's word («ممتازة») */
.rate-word {
  font-weight: 700;
}

.rate-why {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.rate-why .explain-vote-optional {
  font-weight: 400;
}

.rate-line {
  resize: vertical;
  font-weight: 400;
}

.rate-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.rate[aria-busy="true"] .rate-actions {
  opacity: 0.6;
}

/* his rating once sent: its stars, his line, until when, «تعديل» */
.rate-kept {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.rate-kept-line,
.rate-kept-more {
  margin: 0;
}

.rate-kept-more {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.rate-yours,
.rate-kept-word {
  font-weight: 700;
}

.rate-shown {
  display: inline-flex;
  vertical-align: middle;
  color: var(--color-muted);
}

.rate-shown .icon.is-on {
  color: var(--color-star);
  fill: currentColor;
}

/* what the server said: always there, so a screen reader hears it change */
.rate-said {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* ── What the staff read (part b1) ─────────────────────────────────────────────────────────────────────────────── */

/* each version's votes, one a line */
.fb-versions {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the lines students wrote, no names: each its tag (a version, or a rating's stars), its words, and for an admin «من
   كتب هذا؟» */
.fb-lines {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.fb-line {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

.fb-line-tag {
  margin-inline-end: var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-size-small);
  white-space: nowrap;
}

/* a rating's stars as text: gold, darker than a star drawn so the text reads (4.5:1 or more) */
.fb-rating .fb-line-tag {
  color: var(--color-draft);
}

.fb-line-text {
  white-space: pre-wrap;
}

.fb-writer {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-size-small);
}

.fb-writer-said {
  color: var(--color-muted);
}

.fb-writer-name {
  font-weight: 700;
}

.fb-lines-head {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--font-size-small);
}

.fb-average {
  margin: 0 0 var(--space-2);
  font-weight: 700;
}

/* high contrast replaces the colours that show which number is chosen: its box takes the system's; and the stars lit
   take its highlight */
@media (forced-colors: active) {
  .monthly-score-input:checked + .monthly-score-box {
    forced-color-adjust: none;
    border: 2px solid Highlight;
    background: Highlight;
    color: HighlightText;
  }

  .rate-star.is-on .rate-star-box,
  .rate-shown .icon.is-on {
    forced-color-adjust: none;
    color: Highlight;
  }
}