/*
 * Catalog style "default" — rating + comments add-on (loaded instead of _rate.css when
 * index.php?style=default is shown). Mirrors /default/ like default.css.
 */
/* rating, comments (post view) and their counters on cards */
.post__stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: -2px 0 10px; color: var(--muted); font-size: 13px; }
.post__rating { font-weight: 700; color: var(--ink); }
.post__rating-avg { font-size: 15px; }
.post__rating-max { margin-left: 1px; color: var(--muted); font-weight: 500; }
.post__comments { text-decoration: none; }
.post__comments:hover { text-decoration: underline; }

.post__flash { margin: 40px 0 0; }
.notice--ok { border-color: var(--accent); color: var(--accent); }

.rating { margin-top: 48px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.rating__title, .comments__title { margin: 0 0 12px; font-size: 28px; letter-spacing: -0.02em; line-height: 1.15; }
.rating__score { display: flex; align-items: baseline; gap: 8px; margin: 0 0 16px; }
.rating__avg { font-size: 56px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--accent); }
.rating__max { font-size: 18px; font-weight: 700; color: var(--muted); }
.rating__count { margin-left: 8px; color: var(--muted); font-size: 14px; }
.rating__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.rating__scale { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.rating__legend { width: 100%; margin-bottom: 8px; padding: 0; color: var(--muted); font-size: 14px; }
.rating__opt { position: relative; }
.rating__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating__num { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s; }
.rating__opt:hover .rating__num { border-color: var(--ink); }
.rating__input:checked + .rating__num { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rating__input:focus-visible + .rating__num { outline: 2px solid var(--hot); outline-offset: 2px; }
.rating__submit { cursor: pointer; background: none; font-family: inherit; }

.comments { margin-top: 48px; }
.comments__count { color: var(--muted); font-weight: 500; }
.comments__list { display: grid; gap: 14px; margin: 0 0 28px; padding: 0; list-style: none; }
.comment { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.comment__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.comment__author { color: var(--ink); font-weight: 700; font-size: 15px; }
.comment__body { overflow-wrap: anywhere; }
.comments__empty { color: var(--muted); }
.comment-form { display: grid; gap: 14px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.comment-form__field { display: grid; gap: 6px; margin: 0; }
.comment-form__label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.comment-form__input, .comment-form__text { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; }
.comment-form__input { max-width: 360px; }
.comment-form__text { resize: vertical; min-height: 110px; }
.comment-form__input:focus, .comment-form__text:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgb(245 179 1 / 0.45); }
.comment-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; }
.comment-form__submit { cursor: pointer; font-family: inherit; }
.comment-form__note { color: var(--muted); font-size: 13px; }

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