/* Article rating card (PROG-10119) — adapted from the reference template
   attached to the ticket. Replaces the old .assessment separator block:
   the card border is the visual break, target footprint ~650x80. */

.ot-rate {
  --ot-violet: #6C4BF4;
  --ot-star: #F5A623;
  --ot-star-empty: #DAD7E3;
  --ot-ink: #1B1C33;
  --ot-muted: #6E6B85;
  --ot-line: #E4E1F2;
  --ot-ok: #12B76A;
  --ot-ok-bg: #E7F7EF;
  --ot-surface: #FFFFFF;

  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  max-width: 800px; /* same stable width as the read-also cards below */
  padding: 14px 20px;
  margin: 50px 0 80px;
  border: 1px solid var(--ot-line);
  border-radius: 14px;
  background: var(--ot-surface);
  color: var(--ot-ink);
  line-height: 1.45;
}
.ot-rate *, .ot-rate *::before, .ot-rate *::after { box-sizing: inherit; }

/* left column: average score */
.ot-rate__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding-right: 18px;
  border-right: 1px solid var(--ot-line);
}
.ot-rate__score-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
/* zero-votes state: a star sits where the number normally is */
.ot-rate__score-value svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: var(--ot-star);
}
.ot-rate__score-count {
  font-size: 12px;
  color: var(--ot-muted);
  margin-top: 2px;
  white-space: nowrap;
}
.ot-rate__score-count[hidden] { display: none; }

/* center: title + stars */
.ot-rate__main {
  flex: 1 1 220px;
  min-width: 0;
}
.ot-rate__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
}

.ot-rate__stars {
  display: inline-flex;
  gap: 4px;
  border: 0;
  padding: 0;
  margin: 0;
}
.ot-rate__star {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 2px;
  margin: 0;
  cursor: pointer;
  line-height: 0;
  color: var(--ot-star-empty);
  border-radius: 6px;
  transition: transform .12s ease, color .12s ease;
}
.ot-rate__star svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: currentColor;
}
.ot-rate__star.is-on { color: var(--ot-star); }
.ot-rate__star:hover { transform: scale(1.12); }
.ot-rate__star:focus-visible {
  outline: 2px solid var(--ot-violet);
  outline-offset: 2px;
}
.ot-rate.is-voted .ot-rate__star { cursor: default; }
.ot-rate.is-voted .ot-rate__star:hover { transform: none; }

/* right column: "thanks" chip */
.ot-rate__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--ot-ok-bg);
  color: var(--ot-ok);
}
.ot-rate__status[hidden] { display: none; }
/* mobile: everything centered */
@media (max-width: 520px) {
  .ot-rate { gap: 14px; padding: 16px; }
  .ot-rate__score {
    min-width: 0;
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid var(--ot-line);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }
  .ot-rate__score-value { font-size: 24px; }
  .ot-rate__main { text-align: center; }
  .ot-rate__status { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ot-rate__star { transition: none; }
  .ot-rate__star:hover { transform: none; }
}