/*
 * Catalog style "demo8" — rating + comments add-on (loaded instead of _rate.css when
 * index.php?style=demo8 is shown). Mirrors /demo8/ like demo8.css.
 */
/* rating + comments: end credits — a Lazurski title card for the score, frames for the scale, the comments as audience notes */
html { scroll-padding-bottom: calc(var(--strip) + 16px); }
.post__stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin: 2px 0 0; color: var(--soft); font-size: 15px; }
.post--card { grid-template-rows: auto auto auto auto; }
.post--card .post__stats { grid-column: 1; grid-row: 3; }
.post--card .post__actions { grid-row: 2 / span 2; }
.post--card .post__excerpt { grid-row: 4; }
.post__rating { font-family: var(--title); color: var(--ink); font-variant-numeric: tabular-nums; }
.post__rating-avg { font-size: 20px; }
.post__rating-max { margin-left: 2px; color: var(--soft); }
.post__comments { text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 5px; }
.post__comments:hover { color: var(--ink); }

.post__flash { max-width: 70ch; margin: 56px auto 0; padding: 18px 24px; border: 1px solid var(--line); font-family: var(--text); font-size: 17px; line-height: 1.5; }
.notice--ok { color: var(--ink); border-color: var(--yellow); }
.post__flash.notice--error { border-color: #ffb4a8; }

.rating, .comments { max-width: 70ch; margin: clamp(64px, 8vw, 120px) auto 0; }
.rating { padding: clamp(32px, 4vw, 56px) clamp(16px, 3vw, 40px); border-block: 14px solid #000; background: var(--raise); text-align: center; }
.rating__title, .comments__title { margin: 0 0 20px; font-family: var(--title); font-weight: 400; font-size: clamp(34px, 3.6vw, 56px); line-height: 1; letter-spacing: -0.01em; word-spacing: -0.08em; text-align: center; color: var(--ink); }
.rating__title::after, .comments__title::after { content: ""; display: block; width: 48px; height: 1px; margin: 20px auto 0; background: var(--soft); }
.rating__score { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; margin: 0 0 28px; }
.rating__avg { font-family: var(--title); font-size: clamp(96px, 12vw, 176px); line-height: 0.85; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rating__max { font-family: var(--title); font-size: 28px; color: var(--soft); }
.rating__count { flex-basis: 100%; color: var(--soft); font-size: 15px; }
.rating__form { display: grid; justify-items: center; gap: 22px; }
.rating__scale { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rating__legend { width: 100%; margin-bottom: 12px; padding: 0; font-family: var(--title); font-size: 22px; color: var(--soft); text-align: center; }
.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: 52px; height: 52px; background: var(--raise-2); border: 1px solid transparent; color: var(--soft);
    font-family: var(--title); font-size: 24px; font-variant-numeric: tabular-nums; cursor: pointer; transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.rating__opt:hover .rating__num { color: var(--ink); border-color: var(--soft); }
.rating__opt.is-mine .rating__num { color: var(--ink); border-color: var(--yellow); }
.rating__input:checked + .rating__num { background: var(--yellow); border-color: var(--yellow); color: #17130a; }
.rating__input:focus-visible + .rating__num { outline: 2px solid var(--ink); outline-offset: 4px; }
.rating__submit { padding: 0 32px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; transition: background 220ms ease, color 220ms ease; }
.rating__submit::after { display: none; }
.rating__submit:hover { background: var(--ink); color: var(--ground); }

.comments__title { text-align: center; }
.comments__count { font-family: var(--text); font-size: 0.42em; vertical-align: super; color: var(--yellow); }
.comments__list { margin: 0 0 56px; padding: 0; list-style: none; }
.comment { display: grid; grid-template-columns: minmax(0, 28%) minmax(0, 1fr); gap: 4px 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.comment__meta { display: grid; align-content: start; gap: 2px; margin: 0; text-align: right; color: var(--soft); font-size: 13px; }
.comment__author { font-family: var(--title); font-size: 22px; line-height: 1.1; color: var(--ink); overflow-wrap: anywhere; }
.comment__body { overflow-wrap: anywhere; white-space: pre-line; color: #e3dfd6; font-size: 17px; line-height: 1.65; }
.comments__empty { margin: 0 0 48px; font-family: var(--title); font-size: 24px; color: var(--soft); text-align: center; }
.comment-form { display: grid; gap: 20px; padding: clamp(24px, 3vw, 40px); background: var(--raise); border-top: 2px solid var(--yellow); }
.comment-form__field { display: grid; gap: 8px; margin: 0; }
.comment-form__label { font-family: var(--title); font-size: 20px; color: var(--ink); }
.comment-form__input, .comment-form__text {
    width: 100%; padding: 12px 16px; border: 1px solid rgb(242 239 232 / 0.32); border-radius: 0; background: var(--ground); color: var(--ink);
    font: 400 17px/1.5 var(--text); transition: border-color 200ms ease;
}
.comment-form__input { max-width: 380px; min-height: 50px; }
.comment-form__text { min-height: 140px; resize: vertical; }
.comment-form__input:hover, .comment-form__text:hover { border-color: var(--soft); }
.comment-form__input:focus, .comment-form__text:focus { border-color: var(--yellow); outline: 2px solid var(--yellow); outline-offset: 2px; }
.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: 860px) {
    .post--card .post__actions { grid-row: 5; }
}
@media (max-width: 560px) {
    .rating__num { width: 46px; height: 46px; font-size: 22px; }
    .comment { grid-template-columns: minmax(0, 1fr); }
    .comment__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; text-align: left; }
    .comment-form__submit { flex: 1 0 100%; justify-content: center; }
}

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