.writing-review-rating-card {
  margin-top: 1rem;
  padding: 1.2rem;
}

.writing-review-rating-heading {
  padding-bottom: 1rem;
  border-bottom: 1px solid #324954;
}

.writing-review-rating-heading > span {
  color: #73dccc;
  font-size: var(--writing-review-detail-size);
  font-weight: 750;
}

.writing-review-criteria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
  padding-top: 1rem;
}

.writing-review-criteria .ui-radio-group {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid #314854;
  border-radius: 0.75rem;
  background: rgb(11 26 34 / 0.56);
}

.writing-review-criteria .ui-radio-group-legend {
  min-height: 2.8rem;
  overflow-wrap: anywhere;
  font-size: var(--writing-review-subheading-size);
  line-height: 1.5;
}

.writing-review-criteria .ui-radio-option .text-sm {
  font-size: var(--writing-review-body-size);
  line-height: 1.5;
}

.writing-review-criteria .ui-radio-option .text-xs {
  font-size: var(--writing-review-detail-size);
  line-height: 1.5;
}

.writing-review-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.writing-review-notes label > span {
  display: block;
  margin-bottom: 0.45rem;
  color: #d7e0e4;
  font-size: var(--writing-review-body-size);
  font-weight: 700;
  line-height: 1.5;
}

.writing-review-notes textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #3b535f;
  border-radius: 0.7rem;
  background: #0f2029;
  padding: 0.75rem;
  color: #eef4f5;
  font-size: var(--writing-review-body-size);
  line-height: 1.65;
}

.writing-review-notes textarea:focus {
  border-color: #65d8c7;
  outline: 2px solid rgb(101 216 199 / 0.2);
  outline-offset: 1px;
}

.writing-review-footer {
  margin-top: 1rem;
}

.writing-review-button {
  min-height: 2.65rem;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  padding: 0.65rem 1rem;
  cursor: pointer;
  font-size: var(--writing-review-body-size);
  font-weight: 750;
}

.writing-review-button.is-primary {
  background: #55d3c1;
  color: #08221f;
}

.writing-review-button.is-secondary {
  border-color: #46616d;
  background: #152a34;
  color: #d8e5e8;
}

.writing-review-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.writing-review-inline-error,
.writing-review-message.is-error p {
  color: #ffaaaa;
  font-size: var(--writing-review-detail-size);
}

.writing-review-summary {
  padding: 1.3rem;
}

.writing-review-case-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.writing-review-case-summary {
  display: grid;
  gap: 0.3rem;
  padding: 0.95rem;
  text-align: start;
}

.writing-review-case-summary > span {
  color: #65d8c7;
  font-size: 0.7rem;
  font-weight: 800;
}

.writing-review-case-summary strong {
  overflow-wrap: anywhere;
  color: #ecf2f4;
  font-size: 0.88rem;
}

.writing-review-case-summary small {
  color: #94a8b0;
}

.writing-review-case-summary.is-complete {
  border-color: #3b8f78;
}

.writing-review-submit-panel {
  margin-top: 1.2rem;
  border-top: 1px solid #354c57;
  padding-top: 1.2rem;
}

.writing-review-submit-panel h4 {
  color: #edf4f5;
  font-weight: 800;
}

.writing-review-submit-panel p {
  margin-top: 0.25rem;
  color: #9eb0b8;
  font-size: 0.8rem;
}

.writing-review-actions {
  display: flex;
  gap: 0.65rem;
}

.writing-review-complete,
.writing-review-message {
  padding: 1.4rem;
}

.writing-review-complete-mark {
  display: grid;
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border-radius: 50%;
  background: #2d9c7f;
  color: white;
  font-size: 1.35rem;
  font-weight: 900;
}

@media (max-width: 900px) {
  .writing-review-peer-grid,
  .writing-review-criteria,
  .writing-review-notes {
    grid-template-columns: 1fr;
  }

  .writing-review-case-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .writing-review-case-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .writing-review-intro,
  .writing-review-summary-heading,
  .writing-review-case-heading,
  .writing-review-footer,
  .writing-review-submit-panel,
  .writing-review-complete,
  .writing-review-message {
    align-items: stretch;
    flex-direction: column;
  }

  .writing-review-case-heading > p {
    text-align: start;
  }

  .writing-review-case-nav,
  .writing-review-case-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .writing-review-actions {
    flex-direction: column-reverse;
  }

  .writing-review-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .writing-review-progress-track span {
    transition: none;
  }
}