/* Reviews: the star rating (read-only and the half-star picker), the list and the form. */
:root {
    --star-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ebe6dc' stroke='%23cfc7b6' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
--star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' stroke='black' stroke-width='1.2' stroke-linejoin='round' d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
    --star: 1.25rem;
}
/* the colour of the filled stars follows the rating in three bands: 0.5-1 red, 1.5-3 yellow, 3.5-5 green. The ratings come in steps of 0.5, so the
   clamps switch a band on at once; the colour still eases when the rating moves from one band to another (transition on the fill).
   Declared on the elements, not on :root: var(--r) must be read where each rating lives */
.rate, .rv-stars, .rev__trend { --star-fill: color-mix(in oklab, #4f9d4a calc(clamp(0, (var(--r, 5) - 3) * 100, 1) * 100%), color-mix(in oklab, #e3a52b calc(clamp(0, (var(--r, 5) - 1) * 100, 1) * 100%), #d9453b)); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* read-only: grey stars with a gold layer as wide as the rating */
.rate { position: relative; display: inline-block; flex: none; width: calc(var(--star) * 5); height: var(--star); background: var(--star-off) repeat-x 0 0 / var(--star) var(--star); vertical-align: middle; }
.rate::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--r) / 5 * 100%); background: var(--star-fill); -webkit-mask: var(--star-mask) repeat-x 0 0 / var(--star) var(--star); mask: var(--star-mask) repeat-x 0 0 / var(--star) var(--star); }

.rv { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem); }
.rv-head { display: grid; gap: .6rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.rv-title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.02; }
.rv-summary { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0; color: var(--ink-soft); }
.rv-summary strong { color: var(--ink); font-size: var(--fs-lg); }
.rv-empty { color: var(--muted); }
.rv-list { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.rv-card { display: grid; gap: .8rem; padding: clamp(1rem, 2.4vw, 1.5rem); border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.rv-card.is-mine { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.rv-card__top { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.rv-card__top .rate { margin-left: auto; }
.rv-avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.rv-card__who { display: grid; min-width: 0; }
.rv-card__who small { color: var(--muted); }
.rv-card__text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; }
.rv-card__edit { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; color: var(--accent-text); font-weight: 600; font-size: var(--fs-sm); }
.rv-card__edit .icon { width: 1rem; height: 1rem; }

.rv-form { display: grid; gap: 1.4rem; max-width: 40rem; }
.rv-field { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.rv-field > legend, .rv-field > label { font-weight: 700; padding: 0; }
.rv-field textarea { width: 100%; min-height: 9rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; line-height: 1.55; resize: vertical; }
.rv-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rv-count { justify-self: end; color: var(--muted); }
.rv-error { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .8rem 1rem; border-radius: 14px; background: #fbe9e7; color: var(--red-600); font-weight: 600; }
.rv-error .icon { flex: none; width: 1.1rem; height: 1.1rem; }

/* the picker: ten radios 5 ... 0.5 laid out in reverse; their labels are invisible click areas, half a star wide each.
   The stars are drawn by the row itself (grey) and by ONE fill object over all five (::after): its width follows the rating (--r), so a change
   of the rating is just that width growing or shrinking, left to right, and its colour (red -> gold, see --star-fill) eases along with it. */
.rv-stars { --star: clamp(2.8rem, 13vw, 3.25rem); --r: 0; position: relative; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; width: calc(var(--star) * 5); height: var(--star); background: var(--star-off) repeat-x 0 0 / var(--star) var(--star); }
.rv-stars::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--r) / 5 * 100%); background: var(--star-fill); -webkit-mask: var(--star-mask) repeat-x 0 0 / var(--star) var(--star); mask: var(--star-mask) repeat-x 0 0 / var(--star) var(--star); pointer-events: none; transition: width .35s cubic-bezier(.3, .7, .2, 1), background-color .45s ease; }
.rv-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rv-stars label { position: relative; z-index: 1; flex: none; width: calc(var(--star) / 2); height: var(--star); cursor: pointer; }
/* the chosen rating (also without a script); a script only adds the preview under the pointer by setting --r inline */
.rv-stars:has(input[value="0.5"]:checked) { --r: 0.5; }
.rv-stars:has(input[value="1"]:checked) { --r: 1; }
.rv-stars:has(input[value="1.5"]:checked) { --r: 1.5; }
.rv-stars:has(input[value="2"]:checked) { --r: 2; }
.rv-stars:has(input[value="2.5"]:checked) { --r: 2.5; }
.rv-stars:has(input[value="3"]:checked) { --r: 3; }
.rv-stars:has(input[value="3.5"]:checked) { --r: 3.5; }
.rv-stars:has(input[value="4"]:checked) { --r: 4; }
.rv-stars:has(input[value="4.5"]:checked) { --r: 4.5; }
.rv-stars:has(input[value="5"]:checked) { --r: 5; }
.rv-stars:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

.rv-check { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; line-height: 1.4; }
.rv-check input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem; accent-color: var(--accent); }
.rv-check small { color: var(--muted); }
.rv-card__note { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.rv-card__note .icon { flex: none; width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: reduce) { .rv-stars::after { transition: none; } }

/* the filter by course and the "show more" under the list */
.rv-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.rv-filter a { padding: .45rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface, #fff); color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.rv-filter a:hover { border-color: var(--accent); }
.rv-filter a[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.rv-more { display: flex; justify-content: center; margin-top: 1.25rem; }
.rv-more__button { padding: .7rem 1.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface, #fff); color: var(--ink); font-weight: 600; text-decoration: none; }
.rv-more__button:hover { border-color: var(--accent); }
.rv-more.is-loading .rv-more__button { opacity: .5; pointer-events: none; }