.lrr-rating { display: inline-flex; align-items: center; gap: 0.5rem; vertical-align: middle; }

.lrr-stars { position: relative; display: inline-block; font-size: 1rem; line-height: 0; white-space: nowrap; vertical-align: middle; }

.lrr-stars-base, .lrr-stars-fill { display: inline-flex; }

.lrr-stars-base { color: var(--line-strong); }

.lrr-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--peach); }

.lrr-stars svg { display: block; flex: 0 0 auto; width: 1em; height: 1em; }

.lrr-rating-text { color: var(--text-2); font-size: var(--fs-meta); line-height: 1; }

.lrr-rating-text b { color: var(--text); font-weight: 700; }

.rv { container: rv / inline-size; scroll-margin-top: calc(var(--hdr) + 1rem); }

.rv-head-rating { display: flex; align-items: center; }

.rv-head-rating .lrr-stars { font-size: 1.125rem; }

.rv-head-rating .lrr-rating-text { font-size: var(--fs-small); }

.rv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }

.rv-summary, .rv-write { padding: 1.375rem; }

.rv-summary { min-width: 0; }

.rv-empty-title { color: var(--text); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.3; }

.rv-note { margin-top: 0.5rem; color: var(--text-2); font-size: var(--fs-small); line-height: 1.6; }

.rv-note a { color: var(--pink-soft); text-decoration: underline; text-underline-offset: 3px; }

.rv-note a:hover { color: var(--pink-pale); }

.rv-score { display: flex; align-items: baseline; gap: 0.625rem; }

.rv-score-num { color: var(--text); font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1; }

.rv-score-of { color: var(--text-3); font-size: var(--fs-meta); }

.rv-score-stars { margin-top: 0.625rem; }

.rv-score-stars .lrr-stars { font-size: 1.375rem; }

.rv-score-count { margin-top: 0.5rem; color: var(--text-2); font-size: var(--fs-small); }

.rv-bars { display: grid; gap: 0.5rem; margin: 1.125rem 0 0; padding: 0; list-style: none; }

.rv-bar { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) 2rem; align-items: center; gap: 0.625rem; color: var(--text-2); font-size: var(--fs-meta); }

.rv-bar-label { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--text); font-weight: 600; }

.rv-bar-label svg { width: 0.8125rem; height: 0.8125rem; color: var(--peach); }

.rv-bar-track { display: block; height: 0.5rem; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-3); }

.rv-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--peach); }

.rv-bar-n { color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }

.rv-main { min-width: 0; }

.rv-list { display: grid; gap: 1rem; }

.rv-js .rv-item.is-extra { display: none; }

.rv-item { padding: 1.375rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }

.rv-item:focus-visible { outline: 2px solid var(--pink-soft); outline-offset: 2px; }

.rv-item-top { display: flex; align-items: center; gap: 0.75rem; }

.rv-avatar { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--lavender); color: var(--ink); font-family: var(--font-display); font-size: 1rem; font-weight: 700; }

.rv-who { flex: 1 1 auto; min-width: 0; }

.rv-name { display: block; color: var(--text); font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; overflow-wrap: anywhere; }

.rv-meta { display: block; margin-top: 0.125rem; color: var(--text-3); font-size: var(--fs-meta); overflow-wrap: anywhere; }

.rv-badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.3125rem; padding: 0.1875rem 0.625rem; border: 1px solid var(--good); border-radius: var(--r-pill); color: var(--good); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }

.rv-badge svg { width: 0.9375rem; height: 0.9375rem; }

.rv-item-stars { margin-top: 0.875rem; }

.rv-item-stars .lrr-stars { font-size: 1.0625rem; }

.rv-item-title { margin-top: 0.5rem; color: var(--text); font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; text-transform: none; overflow-wrap: anywhere; }

.rv-text { margin-top: 0.5rem; color: var(--text-2); font-size: var(--fs-small); line-height: 1.65; overflow-wrap: anywhere; }

.rv-more { margin-top: 1rem; }

.rv-write { container: rvw / inline-size; min-width: 0; }

.rv-write-title { color: var(--text); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; text-transform: none; }

.rv-write .btn { margin-top: 1rem; }

.rv-notice { margin: 0 0 1.25rem; scroll-margin-top: calc(var(--hdr) + 1rem); }

.rv-write .rv-notice { margin: 1rem 0 0; }

.rv-notice:focus { outline: 2px solid var(--pink-soft); outline-offset: 2px; }

.rv-notice p + p { margin-top: 0.25rem; }

.rv-form { display: grid; gap: 1.125rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

.rv-form .field { max-width: none; }

.rv-form .field-row { grid-template-columns: minmax(0, 1fr); max-width: none; }

.rv-form .btn { margin-top: 0; justify-self: start; }

.rv-rate { min-width: 0; margin: 0; padding: 0; border: 0; }

.rv-rate legend { margin-bottom: 0.5rem; padding: 0; }

.rv-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem; }

.rv-star { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); color: var(--line-strong); cursor: pointer; -webkit-tap-highlight-color: transparent; }

.rv-star input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.rv-star svg { width: 1.875rem; height: 1.875rem; pointer-events: none; transition: color 0.12s ease, transform 0.12s ease; }

.rv-star:has(input:checked),
.rv-star:has(~ .rv-star input:checked) { color: var(--peach); }

.rv-pick:has(.rv-star:hover) .rv-star { color: var(--line-strong); }

.rv-pick:has(.rv-star:hover) .rv-star:hover,
.rv-pick:has(.rv-star:hover) .rv-star:has(~ .rv-star:hover) { color: var(--peach); }

.rv-star:hover svg { transform: scale(1.08); }

.rv-star:has(input:focus-visible) { outline: 2px solid var(--pink-soft); outline-offset: 2px; }

.rv-rate-word { margin-left: 0.5rem; color: var(--text-2); font-size: var(--fs-small); }

.rv-textarea { min-height: 9rem; }

.rv-count { color: var(--text-3); }

.rv-count.is-short { color: var(--warn); }

.rv-count.is-ok { color: var(--good); }

@container rvw (min-width: 28rem) {
  .rv-form .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container rv (min-width: 34rem) {
  .rv-summary.has-count { display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); gap: 0 2.25rem; align-items: center; }
  .rv-summary.has-count .rv-bars { margin-top: 0; }
  .rv-summary.has-count .rv-note { grid-column: 1 / -1; margin-top: 1.125rem; }
}

@container rv (min-width: 46rem) {
  .rv-grid:not(.is-empty) { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); grid-template-areas: "sum main" "write main"; column-gap: 1.5rem; }
  .rv-summary { grid-area: sum; }
  .rv-summary.has-count { display: block; }
  .rv-summary.has-count .rv-bars { margin-top: 1.125rem; }
  .rv-summary.has-count .rv-note { margin-top: 0.5rem; }
  .rv-main { grid-area: main; }
  .rv-write { grid-area: write; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-star svg { transition: none; }
  .rv-star:hover svg { transform: none; }
}