/* ==========================================================================
   NDF — reader comments (assets/comments.js). Site tokens only.
   ========================================================================== */

.cmt{ margin-top:var(--s5); padding-top:var(--s3); border-top:2px solid var(--ink); }
.cmt-head{ display:flex; justify-content:space-between; align-items:baseline; gap:6px var(--s3); flex-wrap:wrap; }
.cmt-title{ font-size:clamp(24px,3vw,32px); margin:0; }
.cmt-count{ color:var(--ink-3); font-weight:400; }
.cmt-rules{ margin:0; color:var(--ink-3); }
.cmt-status{ margin:var(--s3) 0 0; color:var(--ink-3); }
.cmt-status.is-empty, .cmt-status.is-down{ padding:var(--s2) var(--s3); background:var(--paper); border:1px solid var(--rule-soft); font-size:13px; color:var(--ink-2); }
.cmt-status.is-down{ border-left:3px solid var(--stamp); }

.cmt-list, .cmt-replies{ list-style:none; margin:0; padding:0; }
.cmt-list{ margin-top:var(--s3); }
.cmt-list > .cmt-li{ padding:var(--s3) 0; border-top:1px solid var(--rule-soft); }
.cmt-list > .cmt-li:first-child{ border-top:0; padding-top:var(--s1); }
.cmt-replies{ margin:var(--s2) 0 0 26px; padding-left:var(--s3); border-left:2px solid var(--rule); display:grid; gap:var(--s3); }
.cmt-li:target > .cmt-item{ background:var(--paper-2); outline:1px solid var(--stamp); outline-offset:6px; }
.cmt-item{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; }
.cmt-li.is-reply .cmt-item{ grid-template-columns:34px minmax(0,1fr); gap:12px; }
.cmt-avatar{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper-2); color:var(--ink-2); border:1px solid var(--rule);
  font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.04em;
}
.cmt-li.is-reply .cmt-avatar{ width:34px; height:34px; font-size:11px; }
.cmt-main{ min-width:0; }
.cmt-item-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.cmt-name{ font-size:16px; color:var(--ink); }
/* a reply posted by the newsroom (admin) */
.cmt-staff{
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--stamp); border:1px solid currentColor; padding:1px 6px; border-radius:2px; align-self:center;
}
.cmt-item.is-staff .cmt-avatar{ background:var(--ink); color:var(--paper); }
.cmt-item-head time{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.cmt-body{ margin-top:6px; font-size:16.5px; line-height:1.6; color:var(--ink); overflow-wrap:anywhere; }
.cmt-body p{ margin:0; }
.cmt-body p + p{ margin-top:.7em; }
.cmt-reply{
  margin-top:8px; padding:4px 0; border:0; background:none; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--stamp);
}
.cmt-reply:hover{ text-decoration:underline; text-underline-offset:3px; }
.cmt-slot{ margin-left:58px; }
.cmt-slot:empty{ display:none; }
.cmt-slot .cmt-form, .cmt-slot .cmt-pending{ margin-top:var(--s2); }

/* form */
.cmt-compose{ margin-top:var(--s4); }
.cmt-form{ display:grid; gap:var(--s2); padding:var(--s3); background:var(--paper); border:1px solid var(--rule-soft); border-top:3px solid var(--ink); }
.cmt-form-h{ font-size:20px; margin:0; }
.cmt-replying{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.cmt-cancel{ border:1px solid var(--rule); background:var(--ground); color:var(--ink-2); padding:4px 10px; cursor:pointer; font:inherit; }
.cmt-cancel:hover{ border-color:var(--stamp); color:var(--stamp); }
.cmt-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.cmt-field{ display:grid; gap:5px; min-width:0; position:relative; align-content:start; }
.cmt-field label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); font-weight:500; }
.cmt-field input, .cmt-field textarea{
  width:100%; min-width:0; font:inherit; font-size:16px; color:var(--ink); background:var(--ground);
  border:1px solid var(--rule); border-radius:0; padding:10px 12px;
}
.cmt-field textarea{ resize:vertical; min-height:120px; line-height:1.55; }
.cmt-field input:focus, .cmt-field textarea:focus{ outline:none; border-color:var(--stamp); box-shadow:0 0 0 3px color-mix(in srgb, var(--stamp) 18%, transparent); }
.cmt-field [aria-invalid="true"]{ border-color:var(--stamp); border-width:2px; }
.cmt-hint{ margin:0; font-size:13px; color:var(--ink-3); }
.cmt-counter{ justify-self:end; font-family:var(--mono); font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.cmt-counter.is-near{ color:var(--stamp); }
.cmt-hp{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.cmt-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:8px var(--s2); }
.cmt-actions .btn[disabled]{ opacity:.6; cursor:progress; transform:none; }
.cmt-note{ margin:0; color:var(--ink-3); }
.cmt-error{ margin:0; padding:10px 14px; border-left:4px solid var(--stamp); background:var(--ground); color:var(--ink); font-weight:600; font-size:15px; }
.cmt-pending{ padding:var(--s3); background:var(--paper); border:1px solid var(--rule-soft); border-left:4px solid var(--state-2); }
.cmt-pending:focus{ outline:none; }
.cmt-pending-msg{ margin:0 0 4px; font-size:18px; font-weight:700; color:var(--ink); }
.cmt-pending .meta{ margin:0 0 var(--s2); color:var(--ink-3); }

@media (max-width:620px){
  .cmt-row{ grid-template-columns:1fr; }
  .cmt-form{ padding:var(--s2); }
  .cmt-item{ grid-template-columns:36px minmax(0,1fr); gap:10px; }
  .cmt-avatar{ width:36px; height:36px; font-size:11px; }
  .cmt-replies{ margin-left:10px; padding-left:var(--s2); }
  .cmt-slot{ margin-left:0; }
}