/* Review page. Reuses the tokens and classes in styles.css. */
.review-page { max-width: 640px; margin: 0 auto; padding: 48px 20px 96px; display: grid; gap: 40px; }
.review-card { background: var(--linen); border-radius: var(--radius); padding: 36px; display: grid; gap: 20px; box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 0 0 1px rgb(30 59 53 / .05), 0 14px 34px -16px rgb(30 59 53 / .16); }
.review-card h1 { font-size: clamp(2.2rem, 6vw, 3rem); }
.review-card form { padding: 0; background: none; box-shadow: none; }

/* Star picker: radios in reverse order so "all stars up to the chosen one" works with CSS alone */
.stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.stars label { display: block; cursor: pointer; font-size: 2.6rem; line-height: 1; padding: 2px 4px; color: var(--sea-glass); transition: color .15s ease, transform .15s ease; }
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: #C9A24B; }
.stars label:hover { transform: scale(1.12); }
.stars input:focus-visible + label { outline: 3px solid var(--eucalyptus); border-radius: 8px; }
.star-hint { color: var(--stone); font-size: .9rem; min-height: 1.4em; }

.counter { text-align: right; color: var(--stone); font-size: .85rem; margin-top: -10px; }

.thanks { text-align: center; justify-items: center; }
.thanks h2 { font-size: 2.2rem; }

.review-list { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.review-list li { background: var(--linen); border-radius: 18px; padding: 22px; display: grid; gap: 8px; box-shadow: 0 0 0 1px rgb(30 59 53 / .05), 0 10px 26px -16px rgb(30 59 53 / .16); }
.review-list .rv-stars { color: #C9A24B; letter-spacing: 2px; font-size: 1.15rem; }
.review-list .rv-meta { color: var(--stone); font-size: .9rem; }
.review-list .rv-body { white-space: pre-line; }
.review-skeleton { height: 120px; border-radius: 18px; }
.review-page h2 { font-size: clamp(1.8rem, 5vw, 2.4rem); }

@media (max-width: 760px) {
  .review-page { padding: 24px 16px 64px; gap: 28px; }
  .review-card { padding: 24px; }
  .stars label { font-size: 2.8rem; padding: 2px 6px; }
}

.review-gate { display: grid; gap: 16px; justify-items: start; background: var(--mist); border-radius: 18px; padding: 24px; }