/* Reviews and comments. Uses the tokens of site.css. */
.stars { color: var(--warn); letter-spacing: .1em; white-space: nowrap; }
.rating-summary { display: grid; gap: var(--gap); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 600px) { .rating-summary { grid-template-columns: 10rem 1fr; } }
.rating-big { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.dist-row { display: grid; grid-template-columns: 2.2rem 1fr 2.2rem; gap: .5rem; align-items: center; font-size: .9rem; }
.dist-bar { background: var(--line); border-radius: 99px; height: .6rem; overflow: hidden; }
.dist-bar span { display: block; height: 100%; background: var(--warn); }
.review { border-top: 1px solid var(--line); padding: 1rem 0; }
.review:first-of-type { border-top: 0; }
.review h3 { margin: .2rem 0; font-size: 1.05rem; }
.review .meta, .comment .meta { color: var(--muted); font-size: .85rem; display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; }
.review .body, .comment .body { white-space: pre-line; overflow-wrap: anywhere; margin: .4rem 0; }
.review .actions, .comment .actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; font-size: .9rem; }
.reply { margin: .6rem 0 0 1rem; padding: .6rem .9rem; border-left: 3px solid var(--accent); background: var(--bg-alt); border-radius: 0 var(--radius) var(--radius) 0; }
.reply .meta { font-weight: 600; }
.comment { border-top: 1px solid var(--line); padding: .8rem 0; }
.comment .children { margin-left: 1.2rem; }
.rating-input { display: flex; gap: .8rem; flex-wrap: wrap; }
.rating-input label { display: inline-flex; gap: .3rem; align-items: center; margin: 0; font-weight: 400; }
.field-error { color: var(--err); font-size: .85rem; font-weight: 400; display: block; }
.sortbar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.pager { display: flex; gap: 1rem; align-items: center; margin: 1rem 0; }