/*
 * Catalog style "demo4" — rating + comments add-on (loaded instead of _rate.css when
 * index.php?style=demo4 is shown). Mirrors /demo4/ like demo4.css.
 */
/* rating + comments */
/* Card: a yellow Lazurski score and a comment chip under the meta. */
.post__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: -2px 0 12px; color: var(--muted); font: 500 13px/1.4 var(--head); }
.post__rating { display: inline-flex; align-items: baseline; gap: 3px; }
.post__rating-avg { font: 700 22px/1 var(--serif); color: var(--yellow); }
.post__rating-max { color: var(--muted); }
.post__comments { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--surface); color: #fff; text-decoration: none; transition: background 200ms ease; }
.post__comments:hover { background: var(--surface-3); }

/* Post: the score as a yellow print headline, the scale as round chips, comments like a guest book. */
.post__flash { margin: 40px 0 0; }
.notice--ok { box-shadow: inset 4px 0 0 var(--green); color: #d3ecd8; }

.rating, .comments { margin-top: clamp(56px, 6vw, 88px); }
.rating {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px clamp(24px, 4vw, 56px);
    padding: clamp(24px, 3.4vw, 44px); border-radius: 6px; background: var(--surface);
}
.rating__title, .comments__title { margin: 0; font: 700 clamp(28px, 3vw, 44px)/1.05 var(--serif); color: #fff; }
.rating__title { grid-column: 1 / -1; }
.rating__score { display: flex; flex-direction: column; margin: 0; }
.rating__avg { font: 700 clamp(88px, 9vw, 140px)/0.9 var(--serif); color: var(--yellow); letter-spacing: -0.02em; }
.rating__max { margin-top: 6px; font: 600 16px/1 var(--head); color: var(--muted); }
.rating__count { margin-top: 8px; color: var(--muted); font-size: 14px; }
.rating__form { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 8px; }
.rating__scale { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rating__legend { width: 100%; margin-bottom: 12px; padding: 0; font: 700 18px/1.3 var(--serif); color: var(--muted); }
.rating__opt { position: relative; }
.rating__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.rating__num {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-3); color: #fff;
    font: 600 17px/1 var(--head); cursor: pointer; user-select: none; transition: background 200ms ease, color 200ms ease, transform 150ms ease;
}
.rating__opt:hover .rating__num { background: #3b3a40; }
.rating__opt:active .rating__num { transform: scale(0.94); }
.rating__opt.is-mine .rating__num { box-shadow: inset 0 0 0 2px var(--green); }
.rating__input:checked + .rating__num { background: var(--yellow); color: #18171a; }
.rating__input:focus-visible + .rating__num { outline: 2px solid var(--yellow); outline-offset: 3px; }
.rating__submit { padding: 0 26px; border: 0; border-radius: 999px; background: var(--green-btn); font-family: var(--head); text-decoration: none; cursor: pointer; transition: background 200ms ease, transform 150ms ease; }
.rating__submit:hover { background: #276836; }
.rating__submit:active { transform: scale(0.97); }

.comments__title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.comments__count { font: 700 0.7em/1 var(--serif); color: var(--yellow); }
.comments__list { display: grid; gap: 0; margin: 0 0 36px; padding: 0; list-style: none; }
.comment { position: relative; padding: 18px 0 18px 26px; border-bottom: 1px solid var(--line); }
.comment::before { content: ""; position: absolute; left: 0; top: 27px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.comment__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 4px; }
.comment__author { font: 700 21px/1.2 var(--serif); color: #fff; }
.comment__date { font: 500 13px/1.3 var(--head); color: var(--muted); }
.comment__body { max-width: 68ch; color: #d6d6da; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.comments__empty { margin: 0 0 36px; color: var(--muted); font: 700 20px/1.3 var(--serif); }
.comment-form { display: grid; gap: 18px; padding: clamp(22px, 3vw, 36px); border-radius: 6px; background: var(--surface); }
.comment-form__field { display: grid; gap: 8px; margin: 0; }
.comment-form__label { font: 600 14px/1.2 var(--head); color: #fff; }
.comment-form__input, .comment-form__text {
    width: 100%; padding: 12px 18px; border: 1px solid #45444b; background: var(--bg); color: #fff;
    font: 400 16px/1.5 var(--font); transition: border-color 200ms ease, box-shadow 200ms ease;
}
.comment-form__input { max-width: 380px; min-height: 48px; border-radius: 999px; }
.comment-form__text { min-height: 130px; border-radius: 16px; resize: vertical; }
.comment-form__input:focus, .comment-form__text:focus { border-color: var(--yellow); outline: none; box-shadow: 0 0 0 3px rgb(255 181 0 / 0.28); }
.comment-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 4px 0 0; }
.comment-form__submit { border: 0; color: #fff; cursor: pointer; }
.comment-form__note { color: var(--muted); font-size: 13px; }

@media (max-width: 720px) {
    .rating { grid-template-columns: minmax(0, 1fr); }
    .rating__score { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
    .rating__count { flex-basis: 100%; margin-top: 0; }
}
@media (max-width: 420px) {
    .rating__scale { gap: 8px 6px; max-width: 280px; }
}

/* the visitor's own (final) vote, shown instead of the scale */
.rating__mine { margin: 0; line-height: 1.5; }
.rating__mine-score { font-size: 1.6em; font-weight: 700; }