/*
 * Catalog style "demo35" — rating + comments add-on (loaded instead of _rate.css when
 * index.php?style=demo35 is shown). The rating is one more question: "How would you score it?"
 * with ten answer chips that fill cream when chosen; comments are the conversation so far, the
 * form is the demo's huge underlined inputs. Mirrors /demo35/ like demo35.css.
 */

/* cards: a quiet hint line under the answer — serif score, comments link */
.post__stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 16px 0 0; color: var(--soft); font-size: 15px; }
.post__rating { display: inline-flex; align-items: baseline; gap: 3px; }
.post__rating-avg { font: 400 26px/1 var(--serif); color: var(--yellow); font-variant-numeric: tabular-nums; }
.post__rating-max { color: var(--soft); }
.post__comments { color: var(--cream); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.post__comments:hover { text-decoration-color: var(--yellow); }

/* flash after posting */
.post__flash { margin: 56px 0 0; }
.notice--ok { border-color: var(--yellow); color: var(--cream); }
.notice--ok::before { content: "✓  "; white-space: pre; color: var(--yellow); }

/* rating: a question screen */
.rating, .comments { margin-top: clamp(72px, 9vw, 128px); padding-top: 30px; border-top: 2px solid var(--line); }
.rating__title, .comments__title { margin: 0 0 22px; font: 400 clamp(38px, 5vw, 68px)/1.04 var(--serif); letter-spacing: -0.01em; }
.rating__title::after { content: "How would you score it?"; display: block; margin-top: 10px; font-size: 0.5em; color: var(--soft); }
.rating__score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 clamp(26px, 3vw, 40px); }
.rating__avg { font: 400 clamp(96px, 12vw, 170px)/0.86 var(--serif); color: var(--yellow); font-variant-numeric: tabular-nums; }
.rating__max { font: 400 clamp(24px, 2.4vw, 34px)/1 var(--serif); color: var(--cream); }
.rating__count { margin-left: 6px; color: var(--soft); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.rating__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 18px; }
.rating__scale { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rating__legend { width: 100%; margin-bottom: 14px; padding: 0; color: var(--soft); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.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: 58px; height: 58px; border: 1.5px solid var(--line); border-radius: 999px;
    color: var(--cream); font: 400 24px/1 var(--serif); cursor: pointer; user-select: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.rating__opt:hover .rating__num { border-color: var(--cream); }
.rating__opt:active .rating__num { transform: scale(0.94); }
.rating__input:checked + .rating__num { background: var(--cream); border-color: var(--cream); color: var(--night); }
.rating__input:focus-visible + .rating__num { outline: 2px solid var(--yellow); outline-offset: 4px; }
.rating__submit { min-height: 58px; padding: 0 32px; border: 0; background: var(--yellow); color: var(--night); cursor: pointer; }
.rating__submit::after { content: "↵"; font-weight: 400; }

/* the visitor's own (final) vote, shown instead of the scale */
.rating__mine { max-width: 52ch; margin: 0; padding: 20px 24px; border: 1.5px solid var(--yellow); border-radius: 22px; color: var(--cream); line-height: 1.5; }
.rating__mine-score { font: 400 1.9em/1 var(--serif); color: var(--yellow); }

/* comments: the conversation so far */
.comments__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.comments__count { font: 400 0.6em/1 var(--serif); color: var(--yellow); }
.comments__list { display: grid; gap: 14px; margin: 0 0 44px; padding: 0; list-style: none; }
.comment { max-width: 760px; padding: 20px 24px 22px; border: 1.5px solid var(--line); border-radius: 24px 24px 24px 6px; background: var(--faint); }
.comment:nth-child(even) { margin-left: auto; border-radius: 24px 24px 6px 24px; }
.comment__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 8px; }
.comment__author { font: 400 22px/1.15 var(--serif); }
.comment__date { color: var(--soft); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.comment__body { font-size: 18px; line-height: 1.55; overflow-wrap: anywhere; }
.comments__empty { margin: 0 0 40px; color: var(--soft); font: 400 clamp(22px, 2.2vw, 28px)/1.3 var(--serif); }

.comment-form { display: grid; gap: 30px; margin: 0; padding: clamp(24px, 3.4vw, 44px); border: 1.5px solid var(--line); border-radius: 28px; background: rgb(242 236 223 / 0.035); }
.comment-form__field { display: grid; gap: 4px; margin: 0; }
.comment-form__label { color: var(--soft); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.comment-form__input, .comment-form__text {
    width: 100%; padding: 8px 0 12px; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; background: transparent;
    color: var(--cream); font: 400 clamp(22px, 2.6vw, 32px)/1.3 var(--sans); letter-spacing: -0.01em; transition: border-color 0.25s;
}
.comment-form__input { max-width: 520px; }
.comment-form__text { min-height: 150px; resize: vertical; font-size: clamp(19px, 2vw, 24px); line-height: 1.45; }
.comment-form__input:focus, .comment-form__text:focus { outline: none; border-bottom-color: var(--yellow); }
.comment-form__input:focus-visible, .comment-form__text:focus-visible { outline: none; box-shadow: 0 2px 0 var(--yellow); }
.comment-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0; }
.comment-form__submit { cursor: pointer; }
.comment-form__submit::after { content: "↵"; font-weight: 400; }
.comment-form__note { color: var(--soft); font-size: 14px; }

@media (max-width: 520px) {
    .rating__scale { gap: 8px; max-width: 330px; }
    .rating__num { width: 56px; height: 56px; }
    .rating__submit, .comment-form__submit { flex: 1 0 100%; justify-content: center; }
    .comment { padding: 18px 18px 20px; }
    .comment-form { padding: 22px 18px; border-radius: 22px; }
}