/* Reviews: badge, list, verification line, review form and its error pages.
   Extends static/base.css (loaded on every page by base.html); token values only. */

/* stars: one inline SVG drawing from apps.catalog.stars (reviews/_star.html and the stars filter);
   on = navy, off = --text-muted (never --cool-muted) */
.star { width: 16px; height: 16px; flex: none; display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; color: var(--text-muted); }
.star--on { fill: currentColor; color: var(--navy); }
.star-row { display: inline-flex; gap: 2px; align-items: center; white-space: nowrap; }

/* the stars filter (catalog-owned lines in reviews_tags.py) keeps these class names */
.stars { display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; }
.stars__on, .stars__off { display: inline-flex; gap: 1px; }
.stars__on { color: var(--navy); }
.stars__off { color: var(--text-muted); }

.reviews-summary { display: inline-flex; align-items: center; gap: var(--s1); font-size: 14px; color: var(--text); white-space: nowrap; }
.reviews-summary__avg { font-weight: 600; font-variant-numeric: tabular-nums; }
.reviews-summary__sep { color: var(--text-muted); }
.reviews-summary__count { color: var(--accent-text); }
.reviews-summary--empty { color: var(--text-muted); font-size: 14px; }

.reviews { margin-block: var(--s6); }
.reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin-bottom: var(--s2); }
.reviews__title { margin: 0; }
.reviews__summary { margin: 0; }
.reviews-verification { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0 0 var(--s4); max-width: 62ch; }
.reviews__list { list-style: none; padding: 0; margin: 0 0 var(--s5); display: grid; gap: var(--s4); }

/* one review: the style guide panel */
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); }
.review--preview { margin-bottom: var(--s5); }
.review__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s3); font-size: 14px; }
.review__author { font-weight: 600; color: var(--navy); }
.review__date, .review__product { color: var(--text-muted); }
.review__comment { margin: 0 0 var(--s2); }
.review__comment--empty { color: var(--text-muted); }
.review__seed.tag { margin: 0 0 var(--s3); }
.review__reply { margin-top: var(--s3); padding: var(--s3) var(--s4); border-left: 3px solid var(--navy); background: var(--paper-2); color: var(--text); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.review__reply-head { font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 var(--s1); }
.review__reply-head time { font-weight: 400; margin-inline-start: var(--s2); }
.review__reply-text { margin: 0; }

.reviews__empty { color: var(--text-muted); margin-bottom: var(--s5); }
.reviews__rules { font-size: 14px; line-height: 1.55; color: var(--text); }
.reviews__rules p:last-child { margin-bottom: 0; }
.reviews__rules-title { font-size: 16px; color: var(--navy); margin-bottom: var(--s2); }

/* review page: /recenze/<token>/ and its thank-you and error states */
.review-page { max-width: 70ch; }
.review-page__head { margin-bottom: var(--s5); }
.review-page__head h1 { color: var(--navy); }
.review-page__seed { margin-bottom: var(--s5); }
.review-page__seed p { margin: var(--s2) 0 0; }
.review-page__seed .review__seed.tag { margin: var(--s2) 0 0; }
.review-page--error { margin-inline: auto; text-align: center; padding-block: var(--s6); }
.review-page--error h1 { color: var(--navy); }
.review-page--error .lede { margin-inline: auto; }
.review-page__back { justify-content: center; }

.review-form fieldset.rating-field { border: 0; padding: 0; margin: 0 0 var(--s5); background: transparent; }
.review-form legend { padding: 0; margin-bottom: var(--s3); }
.rating-input { display: grid; gap: var(--s1); }
.rating-input__option { display: flex; align-items: center; gap: var(--s3); font-weight: 500; margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); cursor: pointer; }
.rating-input__option:hover { background: var(--cool-pale); }
.rating-input__option input { margin: 0; }
.rating-input__label { color: var(--text); font-size: 14px; }