/* ===========================================================================
   Reactions and comments. Inherits every token from theme.css, so all six
   palettes, radii and type stacks come along for free.
   =========================================================================== */

.social{margin-top:clamp(46px,6vw,74px); display:grid; gap:clamp(30px,4vw,44px)}
.social h2{font-size:clamp(20px,2.6vw,26px); text-transform:var(--display-transform)}

/* ---------------- reactions ---------------- */
.rx{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.rx__btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 15px; border-radius:999px; border:1px solid var(--line-strong);
  background:var(--panel); color:var(--muted); font:500 13.5px/1 var(--body);
  transition:transform .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
[data-theme="riso"] .rx__btn,[data-theme="blueprint"] .rx__btn{border-radius:0}
[data-theme="riso"] .rx__btn{border-width:2px}
[data-theme="glass"] .rx__btn{backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.rx__btn:hover{color:var(--fg); border-color:var(--accent); transform:translateY(-2px)}
.rx__btn:active{transform:translateY(0) scale(.97)}
.rx__btn[aria-pressed="true"]{color:var(--on-accent); background:var(--accent); border-color:var(--accent); font-weight:700}
.rx__emoji{font-size:16px; line-height:1}
@media (prefers-reduced-motion: no-preference){
  .rx__btn[aria-pressed="true"] .rx__emoji{animation:pop .32s var(--ease)}
  @keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.45) rotate(-8deg)}100%{transform:scale(1)}}
}
.rx__n{font-variant-numeric:tabular-nums; opacity:.85}
.rx__total{margin-left:6px; font-size:12.5px; color:var(--muted)}

/* ---------------- comment list ---------------- */
.cm__head{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:baseline; justify-content:space-between}
.cm__count{font-size:13px; color:var(--muted)}
.cm__list{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:16px}
.cm__item{
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); padding:20px;
}
[data-theme="riso"] .cm__item{border:2px solid var(--fg); box-shadow:6px 6px 0 var(--ink-2)}
[data-theme="glass"] .cm__item{backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
[data-theme="blueprint"] .cm__item{border-style:dashed}
.cm__who{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; font-size:13px; color:var(--muted)}
.cm__who b{color:var(--accent); font-weight:600; font-size:14px}
.cm__title{margin:10px 0 8px; font-size:17px}
.cm__body{color:var(--muted); font-size:15px; line-height:1.65}
.cm__body>*{margin:0}
.cm__body>*+*{margin-top:14px}   /* same specificity as the reset above, so this one wins */
.cm__body a{color:inherit; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px}
.cm__body code{background:var(--panel-2); padding:2px 6px; border-radius:3px; font-family:var(--mono); font-size:.9em}
.cm__body ul{margin:0; padding-left:0; list-style:none; display:grid; gap:7px}
.cm__body li{position:relative; padding-left:18px}
.cm__body li::before{content:""; position:absolute; left:0; top:.7em; width:9px; height:1px; background:var(--accent)}
.cm__body blockquote{margin:0; padding:8px 14px; border-left:2px solid var(--accent); color:var(--fg)}
.cm__empty{color:var(--muted); font-size:14.5px}

/* ---------------- the form ---------------- */
.cm__form{
  margin-top:24px;
  border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--panel);
  padding:clamp(20px,3vw,28px); display:grid; gap:16px;
}
[data-theme="riso"] .cm__form{border-width:2px; box-shadow:var(--shadow)}
[data-theme="glass"] .cm__form{backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.cm__grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:620px){.cm__grid{grid-template-columns:1fr}}
.cm__field{display:grid; gap:7px}
.cm__field label{font-size:13px; color:var(--fg); font-weight:500}
.cm__field label .req{color:var(--accent)}
.cm__field .help{font-size:12px; color:var(--muted)}
.cm__field input{
  width:100%; padding:11px 13px; border-radius:var(--radius);
  border:1px solid var(--line-strong); background:var(--bg-2); color:var(--fg);
  font:400 14.5px/1.4 var(--body);
}
[data-theme="riso"] .cm__field input{border-width:2px}
.cm__field input::placeholder{color:color-mix(in srgb, var(--muted) 80%, transparent)}
.cm__field input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* editor */
.editor{border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--bg-2); overflow:hidden}
[data-theme="riso"] .editor{border-width:2px}
.editor:focus-within{border-color:var(--accent)}
.editor__bar{display:flex; flex-wrap:wrap; gap:4px; padding:7px; border-bottom:1px solid var(--line); background:var(--panel-2)}
.editor__bar button{
  min-width:32px; height:30px; padding:0 9px; cursor:pointer;
  border:1px solid transparent; border-radius:var(--radius); background:none;
  color:var(--muted); font:500 13px/1 var(--body);
}
.editor__bar button:hover{color:var(--fg); border-color:var(--line-strong); background:var(--panel)}
.editor__bar button[data-cmd="bold"]{font-weight:800}
.editor__bar button[data-cmd="italic"]{font-style:italic}
.editor__bar button[data-cmd="underline"]{text-decoration:underline}
.editor__bar button[data-cmd="strikeThrough"]{text-decoration:line-through}
.editor__bar button[data-cmd="code"],.editor__bar button[data-cmd="createLink"]{font-family:var(--mono); font-size:12px}
.editor__bar .spacer{flex:1}
.editor__bar .hint{align-self:center; font-size:11.5px; color:var(--muted); padding-right:4px}
.editor__area{
  min-height:150px; max-height:460px; overflow-y:auto; padding:14px;
  font:400 15px/1.65 var(--body); color:var(--fg); outline:none;
}
.editor__area:empty::before{content:attr(data-placeholder); color:color-mix(in srgb, var(--muted) 80%, transparent)}
.editor__area blockquote{margin:0 0 0 2px; padding-left:12px; border-left:2px solid var(--accent); color:var(--muted)}
.editor__area ul{padding-left:20px; margin:0}
.editor__area a{color:var(--accent)}

.cm__actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.cm__note{font-size:12.5px; color:var(--muted); flex:1; min-width:200px}
.cm__msg{font-size:13.5px; padding:11px 14px; border-radius:var(--radius); border:1px solid var(--line-strong); background:var(--bg-2)}
.cm__msg[data-tone="ok"]{border-color:var(--accent); color:var(--fg)}
.cm__msg[data-tone="bad"]{border-color:color-mix(in srgb, var(--accent) 60%, #ff4444); color:var(--fg)}
.cm__msg[hidden]{display:none}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}