.reader-rating-container {
  box-sizing: border-box;
  width: min(100%, 72rem);
  margin: 2.5rem auto;
  padding: 0 1rem;
}

.reader-rating-container > p {
  margin: .75rem 0;
}

.reader-rating {
  margin: 0;
  padding: 1.4rem;
  border: 1px solid #d8dfe1;
  border-radius: 1rem;
  background: #f7faf9;
  color: #17322e;
}

.reader-rating__title {
  margin: 0 0 .35rem;
  font-size: 1.2rem;
  line-height: 1.3;
}

.reader-rating__summary,
.reader-rating__message {
  margin: .5rem 0;
  line-height: 1.5;
}

.reader-rating__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 .5rem;
}

.reader-rating__button,
.reader-rating__retry {
  min-width: 44px;
  min-height: 44px;
  padding: .45rem .7rem;
  border: 1px solid #4b746c;
  border-radius: .55rem;
  background: #fff;
  color: #17322e;
  font: inherit;
  cursor: pointer;
}

.reader-rating__button[aria-pressed="true"] {
  border-color: #174f42;
  background: #174f42;
  color: #fff;
}

.reader-rating__button:focus-visible,
.reader-rating__retry:focus-visible {
  outline: 3px solid #df9b32;
  outline-offset: 3px;
}

.reader-rating__button:disabled {
  cursor: wait;
  opacity: .6;
}