/* ==========================================================================Comments section — dark,minimal redesign (2026-08-18).Loaded after style.css (theme.json priority),so same-specificity ruleshere win by source order — the older,scattered .comments-* rules instyle.css are superseded,not deleted (safer:that file mixes commentstyles with unrelated catalog/emoji rules line-by-line,too risky tosurgically edit without collateral damage).Uses only existing theme tokens — no new colors introduced.========================================================================== */.comments{margin-top:var(--s-8);}/* ── Header row ───────────────────────────────────────────────────────── */.comments__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5);flex-wrap:wrap;}.comments__title{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--c-text);margin:0;}.comments__title-icon{width:20px;height:20px;color:var(--c-muted);flex-shrink:0;}.comments__count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 var(--s-2);border-radius:var(--r-full);background:rgba(102,166,255,.14);color:var(--c-primary-h);font-size:var(--fs-xs);font-weight:var(--fw-semibold);}.comments__count:empty{display:none;}.comments__sort select.comments__sort-select{background:var(--c-surface-2);border:1px solid var(--c-border);color:var(--c-text);font-size:var(--fs-sm);border-radius:var(--r-md);padding:6px 10px;cursor:pointer;transition:border-color var(--t-fast);}.comments__sort select.comments__sort-select:hover,.comments__sort select.comments__sort-select:focus{border-color:var(--c-primary);outline:none;}/* ── Write form ───────────────────────────────────────────────────────── */.comments-form-wrap{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:var(--s-5);margin-bottom:var(--s-6);box-shadow:0 0 0 1px rgba(102,166,255,.03),0 8px 24px -16px rgba(0,0,0,.5);}.comments-form__row{display:flex;gap:var(--s-3);align-items:flex-start;}.comments-form__avatar{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--r-full);background:var(--c-surface-h);flex-shrink:0;}.comments-form__avatar svg{width:22px;height:22px;color:var(--c-muted);}.comments-form__fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s-3);}.comments-form__name-row{display:flex;flex-direction:column;gap:6px;}.comments-form__name-input{width:100%;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--r-md);color:var(--c-text);font-size:var(--fs-base);padding:9px 12px;transition:border-color var(--t-fast);}.comments-form__name-input::placeholder{color:var(--c-muted);}.comments-form__name-input:focus{outline:none;border-color:var(--c-primary);}/* ── Formatting toolbar ──────────────────────────────────────────────── */.comments-toolbar{display:flex;flex-wrap:wrap;gap:6px;}.comments-toolbar__btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--r-md);color:var(--c-muted);font-size:var(--fs-xs);font-weight:var(--fw-medium);cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);}.comments-toolbar__btn svg{width:14px;height:14px;}.comments-toolbar__btn--b,.comments-toolbar__btn--i{width:28px;padding:0;justify-content:center;font-size:var(--fs-sm);font-weight:var(--fw-bold);}.comments-toolbar__btn--i{font-style:italic;}.comments-toolbar__btn:hover{background:var(--c-surface-h);color:var(--c-primary-h);border-color:var(--c-border);}/* ── Textarea + emoji trigger ────────────────────────────────────────── */.comments-form__textarea-wrap{position:relative;}.comments-form__textarea{width:100%;min-height:110px;max-height:260px;resize:vertical;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--r-md);color:var(--c-text);font-family:var(--font-body);font-size:var(--fs-base);line-height:1.5;padding:16px 44px 16px 16px;transition:border-color var(--t-fast);}.comments-form__textarea::placeholder{color:var(--c-muted);}.comments-form__textarea:focus{outline:none;border-color:var(--c-primary);}.comments-form__textarea.is-error{border-color:var(--c-error);}.comments-emoji-btn{position:absolute;top:10px;right:10px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--r-md);color:var(--c-muted);cursor:pointer;transition:background var(--t-fast),color var(--t-fast);font-size:0;/* hide any leftover emoji-character fallback text */}.comments-emoji-btn svg{width:18px;height:18px;}.comments-emoji-btn:hover{background:var(--c-surface-h);color:var(--c-primary-h);}/* ── Emoji picker popup ───────────────────────────────────────────────── */.comments-emoji{position:absolute;top:calc(100% + 6px);right:0;z-index:20;width:260px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:0 12px 32px -12px rgba(0,0,0,.6);padding:var(--s-3);}.comments-emoji[hidden]{display:none;}.comments-emoji__tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:var(--s-2);margin-bottom:var(--s-2);border-bottom:1px solid var(--c-border);}.comments-emoji__tabs button{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--r-md);font-size:var(--fs-md);cursor:pointer;transition:background var(--t-fast);}.comments-emoji__tabs button:hover{background:var(--c-surface-h);}.comments-emoji__tabs button.is-active{border-color:var(--c-border);background:var(--c-surface-2);}.comments-emoji__list{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;max-height:160px;overflow-y:auto;}.comments-emoji__item{display:flex;align-items:center;justify-content:center;height:32px;border-radius:var(--r-md);font-size:var(--fs-lg);cursor:pointer;transition:background var(--t-fast);}.comments-emoji__item:hover{background:var(--c-surface-h);}/* ── Form footer ──────────────────────────────────────────────────────── */.comments-form__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;}.comments-form__hint{color:var(--c-muted);font-size:var(--fs-xs);}.comments-form__footer-right{display:flex;align-items:center;gap:var(--s-3);margin-left:auto;}.comments-form__counter{color:var(--c-muted);font-size:var(--fs-xs);white-space:nowrap;}.comments-form__submit{display:inline-flex;align-items:center;gap:8px;background:var(--c-primary);color:var(--c-bg);border:none;border-radius:var(--r-lg);padding:9px 16px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap;transition:background var(--t-fast),transform var(--t-fast);}.comments-form__submit svg{width:15px;height:15px;}.comments-form__submit:hover{background:var(--c-primary-h);}.comments-form__submit:active{transform:scale(.97);}.comments-form__error{color:var(--c-error);font-size:var(--fs-xs);margin:0;}/* ── Auth gate (only shown when comments.require_auth = true) ───────────── */.comments-auth-gate{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:var(--s-5);margin-bottom:var(--s-6);color:var(--c-muted);font-size:var(--fs-sm);}.comments-auth-gate .button-link{color:var(--c-primary);background:none;border:none;padding:0;font:inherit;cursor:pointer;}.comments-auth-gate .button-link:hover{color:var(--c-primary-h);text-decoration:underline;}/* ── Comment list ─────────────────────────────────────────────────────── */.comments-list{display:flex;flex-direction:column;}.comments-loading,.comments-empty{color:var(--c-muted);font-size:var(--fs-sm);padding:var(--s-4) 0;}.comment{display:flex;gap:var(--s-3);padding:var(--s-4) 0;border-bottom:1px solid var(--c-border);}.comments-list>.comment:last-child{border-bottom:none;padding-bottom:0;}.comment__content{flex:1;min-width:0;}.comment__top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}.comment__author{font-weight:var(--fw-semibold);color:var(--c-text);font-size:var(--fs-sm);}.comment__date{color:var(--c-muted);font-size:var(--fs-xs);}.comment__text{margin-top:4px;color:var(--c-text);font-size:var(--fs-base);line-height:1.55;word-wrap:break-word;}.comment__actions{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-2);}.comment__action{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0;color:var(--c-muted);font-size:var(--fs-xs);font-weight:var(--fw-medium);cursor:pointer;transition:color var(--t-fast);}.comment__action svg{width:15px;height:15px;}.comment__action:hover{color:var(--c-primary-h);}.comment__action--like.is-reacted{color:var(--c-primary);}.comment__action--like.is-reacted svg{fill:currentColor;}.comment__action--dislike.is-reacted{color:var(--c-error);}.comment__action--dislike.is-reacted svg{fill:currentColor;}.comment__reaction-count{min-width:1ch;}/* ── Replies ──────────────────────────────────────────────────────────── */.comment__children:has(> *){margin-top:var(--s-4);padding-left:var(--s-4);border-left:1px solid var(--c-border);display:flex;flex-direction:column;gap:var(--s-4);}.comment--child{padding:0;border-bottom:none;}/* Reply form,dynamically inserted — reuses .comments-form but compact */.comments-form--reply{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-3);margin-bottom:var(--s-3);display:flex;flex-direction:column;gap:var(--s-2);}.comments-form__reply-to{color:var(--c-muted);font-size:var(--fs-xs);}.comments-form--reply .comments-form__name-row{margin-bottom:2px;}.comments-form--reply .comments-form__textarea{min-height:70px;padding:12px 40px 12px 12px;}.comments-form--reply .commnets-form__container{display:flex;align-items:center;gap:var(--s-2);margin-left:auto;}.comments-form--reply .comments-form__submit#cancelReplyBtn,.comments-form--reply button#cancelReplyBtn{background:transparent;color:var(--c-muted);border:1px solid var(--c-border);}.comments-form--reply button#cancelReplyBtn:hover{background:var(--c-surface-h);color:var(--c-text);}/* ── Load more ────────────────────────────────────────────────────────── */.comments-pagination{display:flex;justify-content:center;margin-top:var(--s-5);}.comments-more-btn{background:var(--c-surface-2);border:1px solid var(--c-border);color:var(--c-text);border-radius:var(--r-md);padding:9px 18px;font-size:var(--fs-sm);cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast);}.comments-more-btn:hover{background:var(--c-surface-h);border-color:var(--c-primary);}/* ── Responsive ───────────────────────────────────────────────────────── */@media (max-width:640px){.comments-form-wrap{padding:var(--s-4);}.comments-form__footer{flex-direction:column;align-items:stretch;}.comments-form__footer-right{margin-left:0;justify-content:space-between;}.comments-form__submit{flex:1;justify-content:center;}.comments__sort select.comments__sort-select{width:100%;}}@media (max-width:480px){.comments-form__avatar{display:none;}}