/*
 * Catalog style "demo27" — rating + comments add-on (loaded instead of _rate.css). Mirrors /demo27/
 * like demo27.css: the rating is a glass readout with a huge glowing score and the scale as ringed
 * code badges; comments are glass signal rows.
 */

/* "no votes yet" shows an en dash: Unbounded draws it as a heavy slab, so it comes from a thin system font */
@font-face { font-family: "d27-dash"; src: local("Menlo"), local("Consolas"), local("DejaVu Sans Mono"), local("Noto Sans Mono"), local("Courier New"); font-weight: 100 900; unicode-range: U+2013; }

/* cards: a small readout line */
.post__stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: -4px 0 14px; color: var(--dim); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.post__rating { display: inline-flex; align-items: baseline; gap: 3px; color: #fff; }
.post__rating-avg { font: 700 18px/1 "d27-dash", var(--display); letter-spacing: -0.03em; text-shadow: 0 0 16px rgb(157 255 106 / 0.35); }
.post__rating-max { color: var(--dim); }
.post__comments { color: var(--soft); text-decoration: none; }
.post__comments::before { content: "◉ "; color: var(--c, var(--sig)); }
.post__comments:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.post__flash { margin: 40px 0 0; }
.notice--ok { border-color: rgb(157 255 106 / 0.45); color: #d8ffc4; box-shadow: 0 0 30px -16px var(--sig); }

/* rating: the readout */
.rating, .comments { margin-top: clamp(48px, 6vw, 80px); }
.rating {
    position: relative; overflow: hidden; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--edge); border-radius: var(--r);
    background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.rating::before { content: ""; position: absolute; top: -40%; right: -10%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(157 255 106 / 0.18), transparent); pointer-events: none; }
.rating__title, .comments__title { position: relative; margin: 0 0 18px; font: 700 clamp(22px, 2.4vw, 32px)/1 var(--display); letter-spacing: -0.03em; text-transform: uppercase; color: #fff; }
.rating__score { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 26px; }
.rating__avg { font: 800 clamp(72px, 9vw, 128px)/0.85 "d27-dash", var(--display); font-synthesis: none; letter-spacing: -0.06em; color: #fff; text-shadow: 0 0 40px rgb(157 255 106 / 0.45); }
.rating__max { font: 600 20px/1 var(--display); color: var(--dim); }
.rating__count { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; color: var(--soft); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.rating__count::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 10px var(--sig); }
.rating__form { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 18px; }
.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; color: var(--dim); font-size: 12px; letter-spacing: 0.12em; 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: 50px; height: 50px; border-radius: 50%; color: #d7dae2; font: 500 15px/1 var(--mono);
    box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.22); cursor: pointer; user-select: none;
    transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease, transform 150ms ease;
}
.rating__opt:hover .rating__num { color: #fff; box-shadow: inset 0 0 0 1.5px var(--sig), 0 0 16px -6px var(--sig); }
.rating__opt:active .rating__num { transform: scale(0.94); }
.rating__input:checked + .rating__num { background: var(--sig); color: var(--night); font-weight: 600; box-shadow: 0 0 20px -2px var(--sig-glow); }
.rating__input:focus-visible + .rating__num { outline: 2px solid #fff; outline-offset: 3px; }
.rating__submit { min-height: 50px; padding: 0 26px; border-color: var(--sig); background: var(--sig); color: var(--night); cursor: pointer; box-shadow: 0 0 18px -4px var(--sig-glow); }
.rating__submit:hover { box-shadow: 0 0 28px -2px var(--sig-glow); border-color: var(--sig); }
.rating__mine { position: relative; margin: 0; color: var(--soft); line-height: 1.6; }
.rating__mine-score { padding: 0 4px; font: 800 1.9em/1 var(--display); color: var(--sig); text-shadow: 0 0 18px var(--sig-glow); }

/* comments */
.comments__title { display: flex; align-items: baseline; gap: 14px; }
.comments__count { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; color: var(--sig); font: 500 13px/1 var(--mono); box-shadow: inset 0 0 0 1.5px var(--sig), 0 0 14px -4px var(--sig); }
.comments__list { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; counter-reset: cm; }
.comment {
    position: relative; padding: 16px 20px 16px 62px; border: 1px solid var(--edge); border-radius: 14px; background: var(--glass); counter-increment: cm;
}
.comment::before {
    content: counter(cm, decimal-leading-zero); position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    color: var(--purple); font: 500 10px/1 var(--mono); box-shadow: inset 0 0 0 1.5px var(--purple);
}
.comment:nth-child(3n+2)::before { color: var(--pink); box-shadow: inset 0 0 0 1.5px var(--pink); }
.comment:nth-child(3n)::before { color: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); }
.comment__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 6px; }
.comment__author { font: 600 14px/1.2 var(--display); letter-spacing: 0; color: #fff; }
.comment__date { color: var(--dim); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.comment__body { color: #d7dae2; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.comments__empty { margin: 0 0 24px; color: var(--dim); }
.comment-form { display: grid; gap: 16px; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--edge); border-radius: var(--r); background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.comment-form__field { display: grid; gap: 8px; margin: 0; }
.comment-form__label { color: var(--dim); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.comment-form__input, .comment-form__text {
    width: 100%; padding: 12px 14px; border: 1px solid var(--edge-2); border-radius: 12px; background: #15161b; color: var(--text); font: 400 14.5px/1.5 var(--mono);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.comment-form__input { max-width: 380px; }
.comment-form__text { min-height: 120px; resize: vertical; }
.comment-form__input:focus, .comment-form__text:focus { outline: none; border-color: var(--sig); box-shadow: 0 0 0 3px rgb(157 255 106 / 0.18), 0 0 20px -6px var(--sig); }
.comment-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; }
.comment-form__submit { min-height: 46px; cursor: pointer; }
.comment-form__note { color: var(--dim); font-size: 12px; }

@media (max-width: 520px) {
    .rating__num { width: 46px; height: 46px; }
    .rating__submit { flex: 1 1 100%; }
    .comment { padding: 14px 16px 14px 54px; }
    .comment::before { left: 14px; }
}