/*
 * Catalog style "demo32" — rating + comments add-on (loaded instead of _rate.css). Sticker packs:
 * the 1–10 scale is the picker's quick row (round chips, the chosen one lime with a white edge), the
 * score a big Unbounded number on a sticker badge, comments are chat bubbles, the form is the composer.
 */
.post__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: -2px 0 10px; color: var(--ink-3); font-size: 13.5px; }
.post__rating { display: inline-flex; align-items: baseline; padding: 2px 8px; border-radius: 99px; background: var(--ink); color: var(--lime); }
.post__rating-avg { font: 800 12.5px/1.5 var(--display); }
.post__rating-max { margin-left: 1px; opacity: .7; font-size: 11px; }
.post__comments { color: var(--ink-2); text-decoration: none; }
.post__comments:hover { color: var(--green); text-decoration: underline; }

.post__flash { margin: 40px 0 0; }
.notice--ok { box-shadow: inset 0 0 0 2px var(--lime); }

.rating { margin-top: 52px; padding: clamp(22px, 4vw, 36px); border-radius: 30px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.rating__title, .comments__title { margin: 0 0 16px; font: 800 28px/1.1 var(--display); letter-spacing: -0.035em; }
.rating__score { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
.rating__avg { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: var(--lime); font: 900 44px/1 var(--display); letter-spacing: -0.04em; box-shadow: 0 0 0 7px #fff, 0 16px 26px -14px rgb(21 32 26 / 0.5); transform: rotate(-6deg); }
.rating__max { color: var(--ink-3); font: 700 15px var(--display); }
.rating__count { color: var(--ink-3); font-size: 14px; }
.rating__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.rating__scale { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px; border: 0; border-radius: 22px; background: var(--chat); }
.rating__legend { float: left; width: 100%; margin-bottom: 10px; padding: 0 4px; color: #a9b8ae; font: 700 11px var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.rating__opt { position: relative; }
.rating__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating__num { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgb(255 255 255 / 0.06); color: #e9efe9; font: 800 15px var(--display); cursor: pointer; transition: transform .15s, background .15s; }
.rating__opt:hover .rating__num { transform: translateY(-3px) scale(1.08); background: rgb(255 255 255 / 0.14); }
.rating__input:checked + .rating__num { background: var(--lime); color: var(--ink); box-shadow: 0 0 0 3px #fff; transform: scale(1.1); }
.rating__input:focus-visible + .rating__num { outline: 3px solid var(--lime); outline-offset: 3px; }
.rating__submit { cursor: pointer; border: 0; font-family: var(--text); }
.rating__mine { margin: 0; color: var(--ink-2); }
.rating__mine-score { padding: 2px 10px; border-radius: 99px; background: var(--lime); color: var(--ink); font: 800 1.3em var(--display); }

.comments { margin-top: 52px; }
.comments__count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 99px; background: var(--lime); font: 800 13px var(--display); vertical-align: middle; }
.comments__list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 26px; padding: 22px; border-radius: 30px; list-style: none;
    background: radial-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1.2px) 0 0 / 20px 20px, var(--chat); }
.comment { align-self: flex-start; max-width: min(640px, 88%); padding: 12px 16px; border-radius: 20px 20px 20px 6px; background: #233029; color: #e9efe9; }
.comment:nth-child(even) { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--lime); color: var(--ink); }
.comment__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 4px; font-size: 12.5px; opacity: .75; }
.comment__author { font-weight: 700; opacity: 1; }
.comment__body { overflow-wrap: anywhere; }
.comments__empty { color: var(--ink-3); }
.comment-form { display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px); border-radius: 30px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.comment-form__field { display: grid; gap: 6px; margin: 0; }
.comment-form__label { color: var(--ink-2); font: 700 11px var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.comment-form__input, .comment-form__text { width: 100%; padding: 12px 16px; border: 0; border-radius: 18px; background: #fff; color: var(--ink); font: inherit; box-shadow: inset 0 0 0 1.5px var(--line); }
.comment-form__input { max-width: 360px; border-radius: 999px; }
.comment-form__text { resize: vertical; min-height: 110px; }
.comment-form__input:focus, .comment-form__text:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px rgb(83 245 126 / 0.4); }
.comment-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; }
.comment-form__submit { cursor: pointer; border: 0; font-family: var(--text); }
.comment-form__note { color: var(--ink-3); font-size: 13.5px; }