/*
 * Catalog style "demo10" — rating + comments add-on (loaded instead of _rate.css when
 * index.php?style=demo10 is shown). Mirrors /demo10/ like demo10.css.
 */
/* rating + comments: more sheets on the paper band — the score on a tilted top sheet, the scale as chips, comments as dealt notes */
.post__stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: -2px 0 12px; color: var(--soft); font-size: 15px; }
.post__rating { color: var(--mist); font-weight: 800; font-stretch: 112%; font-variant-numeric: tabular-nums; }
.post__rating-avg { font-size: 19px; color: var(--yellow); }
.post__rating-max { margin-left: 2px; color: var(--soft); font-weight: 500; font-stretch: 100%; }
.post__comments { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.post__comments:hover { color: var(--yellow); }

.post--full .post__flash, .rating, .comments {
    color: var(--ink); border-image: linear-gradient(var(--paper) 0 0) fill 0 / 0 / 0 100vmax;
    padding-inline: max(0px, calc((100% - 760px) / 2));
}
.post--full .post__flash { max-width: none; margin: 0; padding-block: 32px 0; font-size: 18px; font-weight: 700; }
.post__flash::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 12px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.post__flash.notice--error::before { background: #b3261e; }
.notice--ok { color: var(--ink); }
.rating, .comments { padding-block: clamp(56px, 7vw, 96px) 0; }
.comments { padding-bottom: 16px; }
.rating :focus-visible, .comments :focus-visible, .post__flash :focus-visible { outline-color: var(--green); }
.rating__title, .comments__title { margin: 0 0 18px; font-weight: 850; font-stretch: 116%; font-size: clamp(32px, 3.4vw, 56px); line-height: 0.95; letter-spacing: -0.035em; }
.rating__score {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; width: fit-content; max-width: 100%; margin: 0 0 32px; padding: 20px 28px 22px 24px;
    background: #fff; box-shadow: 6px 6px 0 -1px var(--paper-2), 12px 12px 0 -2px var(--paper-3); transform: rotate(-1.2deg);
}
.rating__avg { font-weight: 900; font-stretch: 125%; font-size: clamp(76px, 8vw, 128px); line-height: 0.82; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.rating__max { font-weight: 800; font-stretch: 112%; font-size: 24px; color: var(--soft-ink); }
.rating__count { margin-left: 8px; color: var(--soft-ink); font-size: 15px; font-weight: 600; }
.rating__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 20px; }
.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(--soft-ink); font-size: 16px; font-weight: 600; }
.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; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--paper-3); color: var(--ink);
    font-size: 19px; font-weight: 800; font-stretch: 112%; font-variant-numeric: tabular-nums; cursor: pointer;
    transition: background 200ms ease, color 200ms ease, transform 300ms var(--ease);
}
.rating__opt:hover .rating__num { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); transform: translateY(-3px); }
.rating__opt.is-mine .rating__num { box-shadow: inset 0 0 0 3px var(--yellow); }
.rating__input:checked + .rating__num { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 0 var(--yellow); transform: rotate(-6deg); }
.rating__input:focus-visible + .rating__num { outline: 3px solid var(--green); outline-offset: 3px; }
.rating__submit { padding: 0 28px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; cursor: pointer; }
.rating__submit:hover { background: var(--green); color: #fff; }

.comments__count { margin-left: 4px; color: #2a6d3a; font-variant-numeric: tabular-nums; }
.comments__list { display: grid; gap: 22px; margin: 0 0 48px; padding: 0 14px 0 0; list-style: none; }
.comment { padding: 18px 22px 20px; background: #fff; box-shadow: 5px 5px 0 -1px var(--paper-2), 10px 10px 0 -2px var(--paper-3); }
.comment:nth-child(odd) { transform: rotate(-0.6deg); }
.comment:nth-child(even) { transform: rotate(0.5deg); }
.comment__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0 0 6px; color: var(--soft-ink); font-size: 14px; }
.comment__author { color: var(--ink); font-size: 19px; font-weight: 850; font-stretch: 112%; letter-spacing: -0.02em; }
.comment__body { overflow-wrap: anywhere; white-space: pre-line; font-size: 17px; }
.comments__empty { margin: 0 0 40px; color: var(--soft-ink); font-size: 19px; font-weight: 500; }
.comment-form { display: grid; gap: 18px; margin-right: 14px; padding: clamp(22px, 3vw, 36px); background: var(--paper-2); box-shadow: 7px 7px 0 -1px var(--paper-3), 14px 14px 0 -2px #9fb0a2; }
.comment-form__field { display: grid; gap: 6px; margin: 0; }
.comment-form__label { font-size: 16px; font-weight: 800; font-stretch: 108%; }
.comment-form__input, .comment-form__text {
    width: 100%; padding: 12px 16px; border: 2px solid var(--paper-3); border-radius: 8px; background: #fff; color: var(--ink);
    font: 400 17px/1.45 var(--font); transition: border-color 200ms ease;
}
.comment-form__input { max-width: 380px; min-height: 50px; }
.comment-form__text { min-height: 130px; resize: vertical; }
.comment-form__input:hover, .comment-form__text:hover { border-color: var(--soft-ink); }
.comment-form__input:focus, .comment-form__text:focus { border-color: var(--ink); outline: 3px solid var(--green); outline-offset: 2px; }
.comment-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; }
.comment-form__submit { border: 0; cursor: pointer; }
.comment-form .btn--primary { background: var(--ink); color: var(--paper); }
.comment-form .btn--primary:hover { background: var(--green); color: #fff; }
.comment-form__note { color: var(--soft-ink); font-size: 14px; }
@media (max-width: 520px) {
    .rating__num { width: 46px; height: 46px; font-size: 18px; }
    .rating__score { padding: 16px 20px; }
    .rating__submit, .comment-form__submit { flex: 1 0 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .rating__opt:hover .rating__num { transform: none; }
}

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