/* Rating colour tokens used in score badges + cells. */
:root {
  --rr-rating-1: #2e8b57;  /* Excellent */
  --rr-rating-2: #6cb37b;  /* Very Good */
  --rr-rating-3: #d4a017;  /* Good */
  --rr-rating-4: #d97706;  /* Poor */
  --rr-rating-5: #c0392b;  /* Very Poor */
}

.rr-score-badge {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: 999px;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.rr-score-1 { background: var(--rr-rating-1); }
.rr-score-2 { background: var(--rr-rating-2); }
.rr-score-3 { background: var(--rr-rating-3); }
.rr-score-4 { background: var(--rr-rating-4); }
.rr-score-5 { background: var(--rr-rating-5); }
/* Questions may use more than 5 levels. Beyond 5 the raw level number isn't a
   reliable good/bad signal (6-of-7 vs 6-of-10 differ), so 6-10 render in a
   neutral tone so the badge is never unstyled; the per-level label carries the
   meaning. */
.rr-score-6,
.rr-score-7,
.rr-score-8,
.rr-score-9,
.rr-score-10 { background: #5b6b7b; }

/* Assess form: flex layout. Desktop = side-by-side (question | R1 | R2),
   mobile = stacked vertically. */
.rr-rating-row {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--tblr-border-color, #e5e7eb);
}
.rr-rating-q { line-height: 1.4; word-break: break-word; }
.rr-rating-officials {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rr-rating-official {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.rr-rating-official-label small { display: block; }

/* Desktop: arrange as a row — question column, then officials side-by-side. */
@media (min-width: 768px) {
  .rr-rating-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .rr-rating-q {
    flex: 1 1 0;
    min-width: 220px;
  }
  .rr-rating-officials {
    flex-direction: row;
    gap: 2rem;
  }
  .rr-rating-official {
    align-items: center;
  }
  .rr-rating-official-label {
    text-align: center;
  }
}

/* Mobile: larger radios so they're tappable. */
@media (max-width: 767px) {
  .rr-radio-stack label { font-size: .95rem; margin-right: 1rem; }
  .rr-radio-stack input[type="radio"] { width: 22px; height: 22px; }
}

.rr-radio-stack label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: .75rem;
  margin-right: .35rem;
  cursor: pointer;
  color: var(--tblr-secondary);
}
.rr-radio-stack input[type="radio"] { margin-bottom: 2px; }

/* Vertical rating picker used on the assess form. Each row shows the level
   number (colour-coded) + the level label (e.g. "Excellent") so the meaning
   of 1–5 is visible without hovering. */
.rr-rating-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-width: 28rem;
}
.rr-rating-list-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .75rem;
  border: 1px solid var(--tblr-border-color, #e5e7eb);
  border-radius: .375rem;
  cursor: pointer;
  background: #fff;
  transition: background-color .12s ease, border-color .12s ease;
}
.rr-rating-list-item:hover {
  background: var(--tblr-bg-surface-secondary, #f8fafc);
}
.rr-rating-list-item input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}
.rr-rating-list-item:has(input[type="radio"]:checked) {
  border-color: var(--tblr-primary, #206bc4);
  background: var(--tblr-primary-lt, #edf2fa);
}
.rr-rating-list-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
  color: #fff;
  flex: 0 0 auto;
}
.rr-rating-list-label {
  font-size: .95rem;
  color: var(--tblr-body-color, #1f2937);
  line-height: 1.2;
}
@media (max-width: 575px) {
  .rr-rating-list { max-width: none; }
  .rr-rating-list-item input[type="radio"] { width: 22px; height: 22px; }
}

.rr-autosave-status {
  font-size: .8rem;
  color: var(--tblr-secondary);
}
.rr-autosave-status.is-saving { color: var(--tblr-warning); }
.rr-autosave-status.is-saved { color: var(--tblr-success); }
.rr-autosave-status.is-error { color: var(--tblr-danger); }