/* Comment section shared by all themes. Colours inherit from the theme. */
.yc-comments { margin: 2.5em 0 1em; font-size: 15px; line-height: 1.7; }
.yc-title { margin: 0 0 1em; font-size: 1.2em; }
.yc-list, .yc-replies { list-style: none; margin: 0; padding: 0; }
.yc-thread { padding: 1em 0; border-top: 1px solid rgba(127, 127, 127, .2); }
.yc-replies { margin: .75em 0 0 52px; }
.yc-replies > li { padding: .75em 0 0; }

.yc-item { display: flex; gap: 12px; scroll-margin-top: 80px; border-radius: 6px; transition: background .6s; }
.yc-item.yc-hl { background: rgba(255, 200, 0, .15); }
.yc-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; background: rgba(127, 127, 127, .15); }
.yc-body { flex: 1; min-width: 0; }
.yc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .9em; }
.yc-author { font-weight: 600; }
.yc-badge { font-size: .8em; padding: 0 6px; border-radius: 3px; background: var(--accent, #5c8b59); color: #fff; }
.yc-to, .yc-head time { opacity: .6; }
.yc-text { margin: .25em 0; overflow-wrap: anywhere; }
.yc-reply { display: none; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: .85em; opacity: .6; cursor: pointer; }
.yc-reply:hover { opacity: 1; }
.yc-open .yc-reply { display: inline; }

.yc-form { margin-top: 1.25em; display: grid; gap: 10px; }
.yc-replies .yc-form, .yc-thread > .yc-form { margin: .75em 0 0 52px; }
.yc-form textarea, .yc-form input {
  box-sizing: border-box; width: 100%; margin: 0; padding: 8px 10px; font: inherit; color: inherit;
  background: var(--card, #fff); border: 1px solid rgba(127, 127, 127, .35); border-radius: 4px;
}
.yc-form textarea { resize: vertical; min-height: 6em; }
.yc-form textarea:focus, .yc-form input:focus { outline: none; border-color: var(--accent, #5c8b59); }
.yc-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.yc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.yc-actions button {
  padding: 7px 18px; border: 0; border-radius: 4px; font: inherit; cursor: pointer;
  background: var(--accent, #5c8b59); color: #fff;
}
.yc-actions button:disabled { opacity: .6; cursor: default; }
.yc-msg { font-size: .9em; }
.yc-msg.yc-err { color: #c0392b; }
.yc-replying { font-size: .9em; }
.yc-replying .yc-cancel { margin-left: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; opacity: .6; cursor: pointer; text-decoration: underline; }
.yc-notice { margin-top: 1em; padding: .6em 1em; border-radius: 4px; background: rgba(92, 139, 89, .12); }
.yc-closed { opacity: .6; }
.yc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .yc-fields { grid-template-columns: 1fr; }
  .yc-replies, .yc-replies .yc-form, .yc-thread > .yc-form { margin-left: 0; }
}