Avoid indenting deep comment threads with 1 reply

This is the pinnacle of CSS.

tildes/scss/modules/_comment.scss

@@ -101,6 +101,29 @@
   }
 }
 
+// This is some horrifying CSS.
+// It makes it so that comments of a depth >= 4 will not indent their replies unless
+// there is more than one reply. Instead, it adds text before the next comment (the
+// single reply) indicating that it's a direct reply to the above comment.
+.comment:not([data-comment-depth="0"]):not([data-comment-depth="1"]):not([data-comment-depth="2"]):not([data-comment-depth="3"]) {
+  &[data-comment-replies="1"] {
+    & > .comment-tree-replies {
+      margin-left: -1px;  // compensate for border
+
+      & > .comment-tree-item > .comment > .comment-itself {
+        & > .comment-text::before,
+        & > header > .is-comment-deleted::before,
+        & > header > .is-comment-removed::before {
+          content: "(Reply to above comment)";
+          font-size: 0.6rem;
+          font-style: italic;
+          margin-right: 0.2rem;
+        }
+      }
+    }
+  }
+}
+
 .comment-tree-item {
   margin: 0;
   padding: 0;

tildes/tildes/templates/macros/comments.jinja2

@@ -14,6 +14,7 @@
     <article id="comment-{{ comment.comment_id36 }}"
       class="{{ comment_classes(comment, mark_newer_than)|trim }}"
       data-comment-id36="{{ comment.comment_id36 }}"
+      data-comment-replies="{{ comment.replies|length }}"
 
       {# only add depth attr if we're rendering multiple comments at once #}
       {% if not is_individual_comment %}