/* Original Softtrack comment presentation. Native DLE renders all permissions,
   reply/quote/rating links, moderation controls, forms and thread ordering. */
.st-comments {
  --st-comment-danger: #9b4441;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.st-comments > h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 17px;
  font-size: 22px;
  letter-spacing: -.45px;
}

.st-comments > h2 > span {
  min-width: 28px;
  margin: 0;
  padding: 4px 9px;
  border: 1px solid var(--st-line);
  background: var(--st-surface);
  color: var(--st-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.st-comments #dlemasscomments { margin: 0; }
.st-comments [id^="comment-id-"] { scroll-margin-block-start: 115px; }

.st-comments .comment.cf {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 0 0 12px;
  padding: 18px 20px;
  border: 1px solid var(--st-line);
  border-radius: 14px;
  background: var(--st-surface);
  box-shadow: 0 3px 12px #18332903;
  text-align: left;
}

.st-comments .comment.cf::after { display: none; }
.st-comments .comment-news { grid-column: 1 / -1; width: auto; margin: 0; font-size: 12px; line-height: 1.5; color: var(--st-muted); }
.st-comments .comment-news:empty { display: none; }
.st-comments .comment-news a { text-decoration: underline; text-underline-offset: 3px; }

.st-comments .comment_avatar {
  grid-column: 1;
  width: 40px;
  height: 40px;
  margin: 0;
  border: 1px solid var(--st-line);
  border-radius: 12px;
  background-color: var(--st-soft);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.st-comments .comment_content {
  display: grid;
  grid-column: 2;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
  margin: 0;
}

.st-comments .comment_meta {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 11px;
  min-height: 22px;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.st-comments .comment_author { order: 1; max-width: 100%; color: var(--st-ink); font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.st-comments .comment_author a:hover { text-decoration: underline; text-underline-offset: 3px; }
.st-comments .comment_date { order: 2; color: var(--st-muted); font-size: 11px; }
.st-comments .mass-action { display: inline-flex; order: 3; align-items: center; margin-inline-start: auto; }
.st-comments .mass-action:empty { display: none; }
.st-comments .mass-action label { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 30px; margin: -4px 0; cursor: pointer; }
.st-comments .mass-action input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--st-accent); cursor: pointer; }

.st-comments .comment_post {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  color: var(--st-ink);
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.st-comments .comment_post > :last-child { margin-bottom: 0; }
.st-comments .comment_post p { margin: 0 0 10px; }
.st-comments .comment_post a { color: var(--st-accent); text-decoration: underline; text-underline-offset: 3px; }
.st-comments .comment_post img { max-width: 100%; height: auto; }
.st-comments .comment_post :is(blockquote, .quote) { margin: 10px 0; padding: 11px 14px; border: 0; border-inline-start: 3px solid var(--st-line); border-radius: 0 8px 8px 0; background: var(--st-soft); color: var(--st-muted); font-size: 13px; }
.st-comments .comment_post .title_quote { margin: 10px 0 0; padding: 9px 14px; border: 0; border-inline-start: 3px solid var(--st-line); background: var(--st-soft); color: var(--st-muted); font-size: 11px; font-weight: 650; }
.st-comments .comment_post .title_quote + .quote { margin-top: 0; padding-top: 0; }
.st-comments .comment_post pre { max-width: 100%; overflow-x: auto; white-space: pre; }
.st-comments .comment_post > font { display: block; margin-top: 10px; color: var(--st-muted); font-size: 11px; }

/* The rating list is a control, not a list in the member's written comment.
   Keep the engine's separate star-rating sprite and positioning untouched. */
.st-comments .comment_content > :is(.ratebox, .ratebox2, .ratebox3) {
  display: flex;
  grid-column: 2;
  grid-row: 3;
  align-items: center;
  justify-self: end;
  float: none;
  min-width: 0;
  margin: 2px 0 0;
  color: var(--st-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.st-comments :is(.ratebox2, .ratebox3) > ul.reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 3px 5px;
  border: 1px solid var(--st-line);
  border-radius: 10px;
  background: var(--st-paper);
  list-style: none;
}

.st-comments :is(.ratebox2, .ratebox3) > ul.reset > li { display: inline-flex; align-items: center; justify-content: center; float: none; min-width: 21px; min-height: 26px; margin: 0; padding: 0; list-style: none; line-height: 1; }
.st-comments :is(.ratebox2, .ratebox3) > ul.reset > li::marker { content: ""; }
.st-comments :is(.ratebox2, .ratebox3) > ul.reset > li > a { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; border-radius: 7px; color: var(--st-accent); }
.st-comments :is(.ratebox2, .ratebox3) > ul.reset > li > a:hover { background: var(--st-soft); }
.st-comments :is(.ratebox2, .ratebox3) img { width: 14px; height: 14px; object-fit: contain; }
.st-comments :is(.ratingtypeplus, .ratingtypeplusminus) { padding: 0 3px; font-weight: 650; }
.st-comments .ratingzero { color: var(--st-muted); }
.st-comments .ratingplus { color: var(--st-accent); }
.st-comments .ratingminus { color: var(--st-comment-danger); }

.st-comments .comment_controls {
  display: flex;
  grid-column: 1;
  grid-row: 3;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  margin: 2px 0 0;
  color: var(--st-muted);
  font-size: 11px;
  line-height: 1.3;
}

.st-comments .comment_controls a { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 6px 9px; border: 1px solid transparent; border-radius: 8px; font-weight: 600; text-decoration: none; }
.st-comments .comment_controls a:hover { border-color: var(--st-line); background: var(--st-soft); color: var(--st-ink); }
.st-comments .comment_controls a:is([onclick^="dle_reply("], [onclick^="dle_fastreply("]) { border-color: var(--st-line); color: var(--st-ink); }
.st-comments .comment_controls a[href^="javascript:DeleteComments("]:hover { color: var(--st-comment-danger); }
.st-comments :is(.comment_controls a, .ratebox2 a, .ratebox3 a, .mass-action input, .mass_comments_action select, .mass_comments_action button):focus-visible { outline: 2px solid var(--st-accent); outline-offset: 3px; }

/* Thread markers and indentation stay outside each card. Limit nesting so
   long conversations still have useful reading width on narrow screens. */
.st-comments .comments-tree-list { display: block; margin: 0; padding: 0; list-style: none; }
.st-comments .comments-tree-item { display: block; min-width: 0; margin: 0; padding: 0; list-style: none; }
.st-comments .comments-tree-item::marker { content: ""; }
.st-comments .comments-tree-list .comments-tree-list { margin-inline-start: 19px; padding-inline-start: 19px; border-inline-start: 1px solid var(--st-line); }
.st-comments .comments-tree-list .comments-tree-list .comments-tree-list { margin-inline-start: 0; padding-inline-start: 0; border-inline-start: 0; }

.st-comments .mass_comments_action { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 17px 0 0; padding: 13px 15px; border: 1px solid var(--st-line); border-radius: 11px; background: var(--st-surface); font-size: 12px; }
.st-comments .mass_comments_action label { margin: 0; color: var(--st-muted); }
.st-comments .mass_comments_action select { min-width: 150px; max-width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--st-line); border-radius: 8px; background: var(--st-paper); color: var(--st-ink); font: inherit; }
.st-comments .mass_comments_action button { min-height: 36px; padding: 7px 14px; border-radius: 8px; background: var(--st-soft); color: var(--st-ink); font: inherit; font-weight: 650; }
.st-comments .mass_comments_action button:hover { background: var(--st-line); }
.st-comments .dle-comments-navigation { margin-top: 17px; }
.st-comments .st-pagination { margin-top: 17px; padding: 10px 0 0; border-top: 1px solid var(--st-line); }
.st-comments .dle-comments-navigation .st-pagination { margin-top: 0; }
.st-comments .ajax_comments_next:not(:empty) { margin: 16px 0; text-align: center; }
.st-comments #dlefastreplycomments { margin: 12px 0; padding: 15px; border: 1px solid var(--st-line); border-radius: 12px; background: var(--st-surface); }
.st-comments #dlefastreplycomments .addcomment-post { margin: 0; padding: 0; border: 0; background: transparent; }

:root[data-theme="dark"] .st-comments { --st-comment-danger: #ffb9b1; }
:root[data-theme="dark"] .st-comments .comment.cf { box-shadow: none; }

@media (max-width: 640px) {
  .st-comments { padding: 0; }
  .st-comments > h2 { margin-bottom: 14px; font-size: 20px; }
  .st-comments .comment.cf { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 15px; border-radius: 12px; }
  .st-comments .comment_avatar { width: 32px; height: 32px; border-radius: 10px; }
  .st-comments .comment_content { gap: 9px 8px; }
  .st-comments .comment_meta { gap: 3px 8px; }
  .st-comments .comment_author { font-size: 12px; }
  .st-comments .comment_date { font-size: 10px; }
  .st-comments .comment_post { font-size: 13px; line-height: 1.7; }
  .st-comments .comments-tree-list .comments-tree-list { margin-inline-start: 10px; padding-inline-start: 10px; }
  .st-comments .comments-tree-list .comments-tree-list .comments-tree-list { margin-inline-start: 0; padding-inline-start: 0; }
}

@media (max-width: 480px) {
  .st-comments .comment_content { grid-template-columns: minmax(0, 1fr); }
  .st-comments .comment_content > :is(.ratebox, .ratebox2, .ratebox3) { grid-column: 1; justify-self: start; }
  .st-comments .comment_controls { grid-column: 1; grid-row: 4; gap: 4px; }
  .st-comments .comment_controls a { min-height: 34px; padding: 7px 8px; }
  .st-comments .mass_comments_action { padding: 12px; }
  .st-comments .mass_comments_action label { flex-basis: 100%; }
  .st-comments .mass_comments_action select { flex: 1; min-width: 0; }
}