From efed9f28a07e63aafba49baeba66bcdf6eacf566 Mon Sep 17 00:00:00 2001
From: rafapolo <rafael@extrapolo.com>
Date: Wed, 30 Sep 2026 19:12:17 +0200
Subject: [PATCH] =?UTF-8?q?style:=20=C3=A1rvore=20de=20assuntos=20alinhada?=
 =?UTF-8?q?=20=C3=A0=20esquerda=20com=20conectores?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/wall.html | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/web/wall.html b/web/wall.html
index a93bb2c..a3bbac8 100644
--- a/web/wall.html
+++ b/web/wall.html
@@ -379,16 +379,27 @@
   #card-title { font-size: 1.02rem; color: #f5f5f0; }
   #card-date { font-size: .85rem; color: #b9b9b0; margin-top: 2px; }
   #card-contrib { font-size: .82rem; color: #cdd8e0; margin-top: 10px; }
-  #card-tags { margin-top: 12px; font-family: system-ui, sans-serif; font-size: .7rem; line-height: 1.55; color: #b8c6d1; }
+  /* the card is centred text; the tree needs a common left edge, so it is a
+     left-aligned block that is itself centred */
+  #card-tags {
+    width: fit-content; max-width: 100%; margin: 14px auto 0; text-align: left;
+    font-family: system-ui, sans-serif; font-size: .72rem; line-height: 1.5; color: #b8c6d1;
+  }
   #card-tags:empty { display: none; }
-  #card-tags .tn { margin: 0; padding: 0 0 0 13px; border-left: 1px solid rgba(127,168,201,.28); }
-  #card-tags > .tn { padding-left: 0; border-left: 0; }
-  #card-tags .tl { padding: 1px 0; overflow-wrap: anywhere; }
-  #card-tags .tn.place > .tl { color: #dcebf6; font-weight: 600; }
+  #card-tags .tn { position: relative; margin-left: 6px; padding-left: 15px; border-left: 1px solid rgba(127,168,201,.3); }
+  #card-tags > .tn { margin-left: 0; padding-left: 0; border-left: 0; }
+  #card-tags .tl { padding: 2px 0; overflow-wrap: anywhere; }
+  /* elbow from the parent's line to this label */
+  #card-tags .tn .tn > .tl::before {
+    content: ''; position: absolute; left: 0; top: .82em; width: 10px; border-top: 1px solid rgba(127,168,201,.3);
+  }
+  #card-tags .tn .tn:last-child { border-left-color: transparent; }
+  #card-tags .tn .tn:last-child::after {
+    content: ''; position: absolute; left: -1px; top: 0; height: .82em; border-left: 1px solid rgba(127,168,201,.3);
+  }
+  #card-tags .tn.place > .tl { color: #e6eef5; font-weight: 600; }
   #card-tags .tn.topic > .tl { color: #b8c6d1; }
-  #card-tags .tn > .tl::before { content: '└ '; color: rgba(127,168,201,.5); }
-  #card-tags > .tn > .tl::before { content: ''; }
-  #card-tags .to { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
+  #card-tags .to { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
   #card-tags .to span {
     font-size: .64rem; line-height: 1.7; padding: 0 8px; border-radius: 999px;
     background: rgba(127,168,201,.12); border: 1px solid rgba(127,168,201,.22);