style.css: Take the indent from the nesting

mkwb writes a reply inside what it answers now, so the indent is one
margin a level rather than nine rules counting depth, and each reply's
rail stacks with its parents' --- which is the thread view the flat
list could only approximate with a single rule.

On a narrow screen the margin goes and the rails carry it alone: at
depth 7 that is 273px of text on a 390px phone against 133px if the
desktop indent were kept, and against 350px and no nesting at all,
which is what was there before.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KxLpaNQThKfMG3ecCJptP9

1 files changed, 25 insertions, 30 deletions

diff --git a/src/content/style.css b/src/content/style.css
index d63b51f..df82637 100644
--- a/src/content/style.css
+++ b/src/content/style.css
@@ -321,25 +321,26 @@ h2:hover a.anchor {
 }
 
 
-#comments .message {
+/* A reply is written inside what it answers, so the indent comes
+   from the nesting and not from counting depth: one margin a level,
+   and a rail down the left of each that stacks with its parents'.
+   The card carries the box, so nesting costs a margin rather than
+   the whole of a parent's padding and border as well. */
+#comments .message .message {
+  margin-left: 1rem;
+  border-left: 3px solid var(--color-line);
+  padding-left: 0.75rem;
+}
+
+#comments .message-card {
   background-color: var(--color-2nd-bg);
   border: 1px solid;
   border-color: var(--color-pre-border);
   border-radius: 10px;
   padding: 0.5rem 1rem;
   margin-bottom: 1rem;
-  margin-left: 9rem;
 }
 
-#comments .message[data-depth="0"] { margin-left: 0; }
-#comments .message[data-depth="1"] { margin-left: 1rem; }
-#comments .message[data-depth="2"] { margin-left: 2rem; }
-#comments .message[data-depth="3"] { margin-left: 3rem; }
-#comments .message[data-depth="4"] { margin-left: 4rem; }
-#comments .message[data-depth="5"] { margin-left: 5rem; }
-#comments .message[data-depth="6"] { margin-left: 6rem; }
-#comments .message[data-depth="7"] { margin-left: 7rem; }
-#comments .message[data-depth="8"] { margin-left: 8rem; }
 
 #comments .message-header {
   display: flex;
@@ -373,26 +374,20 @@ h2:hover a.anchor {
 #comments div.message-body p:first-child { margin-top: 0; }
 #comments div.message-body p:last-child { margin-bottom: 0; }
 
-/* A narrow screen has no room for a rem a level: at depth 8, which
-   this site's threads reach, an eight-rem indent leaves about ten for
-   the words.  The step shrinks to a third of a rem, and the rail down
-   the left of every reply carries the nesting that an offset that
-   small no longer can on its own. */
+/* A narrow screen has no room for a rem a level: this site's threads
+   reach depth 8, and eight rems of nesting leaves about ten for the
+   words on a 390px phone.  The margin goes and the rails do the
+   work, each level costing only the width of its own rule.  Past
+   the sixth the rails stop stacking --- which is what the depth on
+   the element is for, since CSS cannot count ancestors. */
 @media (max-width: 40rem) {
-  #comments .message { margin-left: 3.15rem; }
-  #comments .message[data-depth="0"] { margin-left: 0; }
-  #comments .message[data-depth="1"] { margin-left: 0.35rem; }
-  #comments .message[data-depth="2"] { margin-left: 0.7rem; }
-  #comments .message[data-depth="3"] { margin-left: 1.05rem; }
-  #comments .message[data-depth="4"] { margin-left: 1.4rem; }
-  #comments .message[data-depth="5"] { margin-left: 1.75rem; }
-  #comments .message[data-depth="6"] { margin-left: 2.1rem; }
-  #comments .message[data-depth="7"] { margin-left: 2.45rem; }
-  #comments .message[data-depth="8"] { margin-left: 2.8rem; }
+  #comments .message .message {
+    margin-left: 0;
+    padding-left: 0.5rem;
+  }
 
-  #comments .message[data-depth]:not([data-depth="0"]) {
-    border-left: 3px solid var(--color-accent);
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+  #comments .message[data-depth="7"],
+  #comments .message[data-depth="8"] {
+    border-left-color: var(--color-accent);
   }
 }