/*
 * Catalog style "demo19" — rating + comments add-on (loaded instead of _rate.css when
 * index.php?style=demo19 is shown). Mirrors /demo19/ like demo19.css.
 */
/* rating + comments ──────────────────────────────────────────────────────────────────────────
   cards: a yellow score pill and an underlined count in the slot body; post: two more rounded
   pages in the stack (never sticky), each opened by a ruled, numbered head — the score as ten
   tall tiles, the comments numbered like slots, the form on a deep inner card */
.post__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; font: 700 14px/1.2 var(--font); }
.post__rating { display: inline-flex; align-items: baseline; gap: 2px; padding: 6px 12px; border-radius: 999px; background: var(--yellow); color: var(--ink); }
.post__rating-avg { font-size: 16px; font-weight: 900; }
.post__rating-max { font-weight: 500; }
.post__comments { color: var(--green); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post__comments:hover { color: var(--ink); }
.post--even .post__comments { color: var(--yellow); }
.post--even .post__comments:hover { color: #fff; }

.post__flash { margin: 0; }
.notice--ok { background: var(--deep); color: #f1f3ee; box-shadow: inset 8px 0 0 var(--yellow); }

.rating, .comments { position: static; padding: clamp(28px, 5vw, 64px); border-radius: var(--radius); background: var(--paper); }
.rating {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-areas: "title form" "score form";
    align-items: start; gap: 18px clamp(24px, 4vw, 64px);
}
.rating__title, .comments__title {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin: 0; padding-top: 16px; border-top: 2px solid var(--ink);
    font: 900 clamp(34px, 4vw, 56px)/0.95 var(--font); letter-spacing: -0.045em;
}
.rating__title::before, .comments__title::before { font-size: 0.4em; letter-spacing: 0; color: var(--green); font-variant-numeric: tabular-nums; }
.rating__title::before { content: "01" / ""; }
.comments__title::before { content: "03" / ""; } /* 02 = the tags page (demo19_tags.css) */
.rating__title { grid-area: title; }
.rating__score { grid-area: score; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px 10px; margin: 0; }
.rating__avg { font: 900 clamp(96px, 11vw, 176px)/0.8 var(--font); letter-spacing: -0.06em; }
.rating__max { padding-bottom: 0.25em; font: 700 22px/1 var(--font); color: var(--soft); }
.rating__count { grid-column: 1 / -1; margin-top: 8px; font: 500 15px/1.3 var(--font); color: var(--soft); }
.rating__form { grid-area: form; align-self: end; display: grid; gap: 18px; }
.rating__scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rating__legend { margin: 0 0 12px; padding: 0; font: 700 14px/1.2 var(--font); color: var(--green); }
.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; height: clamp(56px, 6vw, 88px); border-radius: 16px; background: var(--ground);
    font: 900 clamp(20px, 2vw, 32px)/1 var(--font); letter-spacing: -0.03em; cursor: pointer;
    transition: background 250ms ease, color 250ms ease, transform 500ms var(--ease);
}
.rating__opt:hover .rating__num { background: #dce1d8; transform: translateY(-4px); }
.rating__opt.is-mine .rating__num { box-shadow: inset 0 0 0 3px var(--ink); }
.rating__input:checked + .rating__num { background: var(--yellow); color: var(--ink); transform: translateY(-4px); }
.rating__input:focus-visible + .rating__num { outline: 3px solid var(--green); outline-offset: 3px; }
.rating__submit { justify-self: start; border: 0; cursor: pointer; background: var(--ink); color: #fff; }
.rating__submit:hover { background: var(--green); }

.comments { counter-reset: cmt; }
.comments__count { align-self: center; padding: 7px 14px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 17px/1 var(--font); letter-spacing: 0; }
.comments__list { margin: 28px 0 32px; padding: 0; list-style: none; }
.comment { counter-increment: cmt; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 16px; padding: 20px 0; border-top: 1px solid #d3d9d0; }
.comment::before { content: counter(cmt, decimal-leading-zero); grid-row: 1 / span 2; font: 900 15px/1.5 var(--font); font-variant-numeric: tabular-nums; color: var(--green); }
.comment__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; font: 500 14px/1.3 var(--font); color: var(--soft); }
.comment__author { font: 700 17px/1.3 var(--font); color: var(--ink); }
.comment__body { grid-column: 2; font: 500 clamp(19px, 1.8vw, 24px)/1.35 var(--font); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.comments__empty { margin: 24px 0 28px; color: var(--soft); font-size: 18px; }
.comment-form { display: grid; gap: 16px; padding: clamp(20px, 3vw, 36px); border-radius: calc(var(--radius) - 8px); background: var(--deep); color: #f1f3ee; }
.comment-form :focus-visible { outline-color: var(--yellow); }
.comment-form__field { display: grid; gap: 8px; margin: 0; }
.comment-form__label { font: 700 14px/1.2 var(--font); color: var(--yellow); }
.comment-form__input, .comment-form__text { width: 100%; padding: 13px 18px; border: 0; border-radius: 16px; background: var(--paper); color: var(--ink); font: 400 17px/1.5 var(--font); }
.comment-form__input { max-width: 420px; border-radius: 999px; }
.comment-form__text { min-height: 140px; resize: vertical; }
.comment-form__input:focus, .comment-form__text:focus { outline: 3px solid var(--yellow); outline-offset: 3px; }
.comment-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0; }
.comment-form__submit { border: 0; cursor: pointer; }
.comment-form__submit:hover { background: #fff; color: var(--ink); }
.comment-form__note { color: var(--on-deep); font-size: 14px; }
@media (max-width: 899px) {
    .rating { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "score" "form"; }
    .rating__scale { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .comment { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 10px; }
}

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