From a4df2b4982e0102d72eedebe80e8af55945d6aed Mon Sep 17 00:00:00 2001
From: Jonathan Hvid <joh@fenja.ai>
Date: Tue, 12 May 2026 10:47:10 +0200
Subject: [PATCH] style(nav): active-link dot + 0.5px vertical divider before
 user name

- Active link no longer carries a background fill or pill. Instead, a
  4px terracotta dot is centred 22px below the link via ::after. Quieter,
  more confident, and survives the cream/white surface change without
  needing a hover-area redesign.
- Vertical divider before the user's name shifts from the existing ghost-
  border colour to a solid rgba(0,0,0,0.15) line, 18px tall with 18px
  padding either side (replacing the prior --space-2 / 8px). Still a
  scaled-1px element rather than a pipe character.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/layouts/AppLayout.astro | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/layouts/AppLayout.astro b/src/layouts/AppLayout.astro
index 5722cbd..71b08f0 100644
--- a/src/layouts/AppLayout.astro
+++ b/src/layouts/AppLayout.astro
@@ -165,14 +165,15 @@ const year = new Date().getFullYear();
     display: inline-block;
     width: 1px;
     height: 18px;
-    background: var(--ghost-border-color);
-    margin: 0 var(--space-2);
+    background: rgba(0, 0, 0, 0.15);
+    margin: 0 18px;
     transform: scaleX(0.5);
     transform-origin: center;
   }
   .nav-logout-form { display: inline-flex; }
 
   .nav-link {
+    position: relative;
     font-family: var(--font-sans);
     font-size: var(--text-label-md);
     font-weight: 500;
@@ -183,17 +184,26 @@ const year = new Date().getFullYear();
     padding: var(--space-2) var(--space-3);
     border-radius: var(--radius-sm);
     border-bottom: none;
-    transition: color var(--duration-fast) var(--ease-standard),
-                background var(--duration-fast) var(--ease-standard);
+    transition: color var(--duration-fast) var(--ease-standard);
   }
   .nav-link:hover {
     color: var(--on-surface);
-    background: var(--surface-container-low);
     border-bottom: none;
   }
   .nav-link.active {
     color: var(--on-surface);
-    background: var(--surface-container);
+  }
+  /* 4px terracotta dot under the active link, 22px below its baseline. */
+  .nav-link.active::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: -22px;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: var(--pigment-terracotta);
+    transform: translateX(-50%);
   }
 
   /* ── User zone ──────────────────────────────────────────────────── */