/* 博文底部留言区，配合 /assets/comments.js。v2 起配合 ul.css（副刊风），颜色都取配色变量 */
.comments { margin-top: 64px; display: flex; flex-direction: column; }
.comments > h2 { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid var(--rule); font-size: 22px; font-weight: 900; letter-spacing: .12em; }
.comments > h2 .cm-count { font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.cm-form { display: flex; flex-direction: column; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--hair); font-family: var(--sans); }
.cm-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.cm-form input, .cm-form textarea { font: 16px/1.7 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; padding: 6px 0; width: 100%; outline: none; }
.cm-form input { max-width: 16em; }
.cm-form textarea { min-height: 96px; resize: vertical; }
.cm-form input:focus, .cm-form textarea:focus { border-bottom-color: var(--red); }
.cm-form .cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cm-form .cm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cm-form .cm-len { font-size: 12px; color: var(--muted); }
.cm-form button.cm-send { font: 600 14px var(--sans); letter-spacing: .08em; color: var(--block-ink); background: var(--block); border: 0; padding: 11px 22px; min-height: 44px; cursor: pointer; }
.cm-form button.cm-send:hover { background: var(--red); }
[data-p="dark"] .cm-form button.cm-send { box-shadow: inset 0 0 0 1px var(--hair); }
.cm-form button.cm-send:disabled { opacity: .5; cursor: wait; }
.cm-form .cm-note { margin: 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.comments [hidden] { display: none !important; }
.cm-re { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 12px; background: var(--tint); font-size: 13px; line-height: 1.6; }
.cm-re button, .cm-item .cm-reply { font: 600 12px var(--sans); background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cm-status { padding: 24px 0; text-align: center; font-family: var(--sans); font-size: 14px; color: var(--muted); }
.cm-status.err { color: var(--red); }
.cm-list { list-style: none; margin: 0; padding: 0; }
.cm-item { padding: 18px 0; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; }
.cm-item .cm-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cm-item .cm-name { font-weight: 600; font-size: 15px; }
.cm-item time { font-family: var(--sans); font-size: 12px; color: var(--muted); white-space: nowrap; }
.cm-item .cm-quote { font-size: 13px; line-height: 1.6; color: var(--muted); padding-left: 10px; border-left: 2px solid var(--hi); }
.cm-item .cm-body { margin: 0; font-size: 16px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-item .cm-reply { align-self: flex-start; }
/* 访客写的字不在网站字体子集里，名字和正文直接用系统字体，免得一行里混两种字体 */
.cm-item .cm-name, .cm-item .cm-body, .cm-item .cm-quote, .cm-re span { font-family: var(--sans); }
@media (max-width: 760px) {
  .comments > h2 { font-size: 20px; }
  .cm-form input { max-width: none; }
}