/*
 * Catalog style "demo14" — rating + comments add-on (loaded instead of _rate.css when
 * index.php?style=demo14 is shown). Mirrors /demo14/ like demo14.css.
 */
/* rating + comments: a lit set card on the wall — the score glows warm, the scale is a row of console switches */
.post__stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: -4px 0 14px; color: var(--soft); font-size: 14px; }
.post__rating { color: var(--ink); }
.post__rating-avg { color: var(--warm); font: 400 24px/1 var(--serif); }
.post__rating-max { margin-left: 2px; color: var(--soft); font-size: 13px; }
.post__comments { text-decoration: underline; text-decoration-color: rgb(255 207 148 / 0.45); text-underline-offset: 4px; }
.post__comments:hover { color: var(--warm); }

.post__flash { max-width: 720px; margin: 56px auto 0; }
.notice--ok { border-color: var(--warm); color: var(--ink); box-shadow: 0 0 60px -24px rgb(255 207 148 / 0.5); }

.rating, .comments { max-width: 720px; margin: clamp(56px, 6vw, 88px) auto 0; }
.rating {
    position: relative; padding: clamp(26px, 4vw, 44px); border-radius: 16px; border: 1px solid var(--line); border-top-color: rgb(255 207 148 / 0.35);
    background: linear-gradient(180deg, rgb(255 207 148 / 0.08), transparent 60%), var(--wall);
}
.rating__title, .comments__title { margin: 0 0 6px; font: 400 clamp(40px, 4vw, 60px)/1 var(--serif); letter-spacing: -0.015em; }
.rating__title::before, .comments__title::before { content: ""; display: block; width: 36px; height: 2px; margin-bottom: 22px; border-radius: 2px; background: var(--warm); box-shadow: 0 0 12px var(--warm); }
.rating__score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 28px; }
.rating__avg { color: var(--warm); font: 400 clamp(88px, 9vw, 132px)/0.95 var(--serif); letter-spacing: -0.02em; text-shadow: 0 0 60px rgb(255 207 148 / 0.35); }
.rating__max { color: var(--soft); font: italic 400 30px/1 var(--serif); }
.rating__count { color: var(--soft); font-size: 15px; }
.rating__form { display: grid; gap: 22px; justify-items: start; }
.rating__scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.rating__legend { width: 100%; margin: 0 0 14px; padding: 0; color: var(--soft); font-size: 15px; }
.rating__opt { position: relative; display: block; min-width: 0; }
.rating__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.rating__num {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px;
    border-radius: 12px; border: 1px solid var(--line); background: var(--ground); color: var(--ink);
    font: 400 31px/1 var(--serif); cursor: pointer; transition: border-color 250ms ease, background 250ms ease, color 250ms ease, box-shadow 400ms var(--ease);
}
/* the switch LED */
.rating__num::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3a453e; transition: background 250ms ease, box-shadow 250ms ease; }
.rating__opt:hover .rating__num { border-color: var(--soft); }
.rating__input:checked + .rating__num { border-color: var(--warm); background: var(--warm); color: var(--dark); box-shadow: 0 0 36px -6px rgb(255 207 148 / 0.7); }
.rating__input:checked + .rating__num::before { background: var(--dark); }
.rating__opt.is-mine .rating__num::before { background: var(--warm); box-shadow: 0 0 10px var(--warm); }
.rating__input:checked + .rating__num::before { box-shadow: none; }
.rating__input:focus-visible + .rating__num { outline: 2px solid var(--ink); outline-offset: 3px; }
.rating__submit { padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }

.comments__count { margin-left: 6px; color: var(--warm); font-style: italic; }
.comments__list { display: grid; gap: 14px; margin: 26px 0 36px; padding: 0; list-style: none; }
.comment { padding: 22px 26px 24px; border-radius: 16px; background: var(--wall); border: 1px solid var(--line); }
.comment__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 8px; color: var(--soft); font-size: 14px; }
.comment__author { color: var(--warm); font: italic 400 26px/1.1 var(--serif); }
.comment__body { color: #ddd7cb; font-size: 17px; overflow-wrap: anywhere; }
.comments__empty { margin: 22px 0 30px; color: var(--soft); font: italic 400 24px/1.3 var(--serif); }
.comment-form { display: grid; gap: 18px; padding: clamp(22px, 3vw, 32px); border-radius: 16px; border: 1px solid var(--line); background: rgb(19 26 22 / 0.6); }
.comment-form__field { display: grid; gap: 8px; margin: 0; }
.comment-form__label { color: var(--soft); font-size: 14px; font-weight: 700; }
.comment-form__input, .comment-form__text {
    width: 100%; padding: 12px 16px; border: 1px solid #3a453e; border-radius: 10px;
    background: var(--ground); color: var(--ink); font: 400 17px/1.5 var(--sans); transition: border-color 200ms ease, box-shadow 300ms ease;
}
.comment-form__input { max-width: 400px; }
.comment-form__text { min-height: 130px; resize: vertical; }
.comment-form__input:hover, .comment-form__text:hover { border-color: var(--soft); }
.comment-form__input:focus, .comment-form__text:focus { outline: none; border-color: var(--warm); box-shadow: 0 0 0 3px rgb(255 207 148 / 0.3), 0 0 32px -8px rgb(255 207 148 / 0.5); }
.comment-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0; }
.comment-form__submit { border: 0; cursor: pointer; }
.comment-form__note { color: var(--soft); font-size: 14px; }
@media (max-width: 640px) {
    .rating__scale { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .rating__num { min-height: 58px; }
    .comment { padding: 18px 20px 20px; }
}

/* 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; }