From 182704b9cda07728a9aa015ff82bfcd72208aa2b Mon Sep 17 00:00:00 2001
From: Robin Dittmar <robindittmar@gmail.com>
Date: Mon, 31 Aug 2026 22:00:49 +0200
Subject: [PATCH] feat: reverted "sync" stamps back to colored dots

---
 src/assets/base.css          |  2 +-
 src/assets/main.css          | 20 --------------------
 src/components/AppHeader.vue | 16 ++++++++++------
 3 files changed, 11 insertions(+), 27 deletions(-)

diff --git a/src/assets/base.css b/src/assets/base.css
index 4c4e852..4b31d91 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -27,7 +27,7 @@
     'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
   --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --font-stamp: 'Special Elite', var(--font-mono);
+  --font-stamp: 'Special Elite', var(--font-mono), monospace;
 
   --radius-sm: 3px;
   --radius-md: 5px;
diff --git a/src/assets/main.css b/src/assets/main.css
index 637aa34..bd7fa66 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -129,26 +129,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* Rubber-stamp badge: the app's signature mark, used for sync status. */
-.stamp {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  padding: 0.15rem 0.55rem;
-  border: 1.5px solid currentColor;
-  border-radius: 999px;
-  box-shadow: 0 0 0 2px var(--c-bg) inset;
-  outline: 1px solid currentColor;
-  outline-offset: 2px;
-  transform: rotate(-3deg);
-  font-family: var(--font-stamp);
-  font-size: 0.62rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  line-height: 1.4;
-  white-space: nowrap;
-}
-
 .page {
   min-height: 100vh;
   padding: 1rem 1rem calc(var(--nav-height) + var(--safe-bottom) + 1.5rem);
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 55d9d95..23a57f5 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -106,15 +106,19 @@ const stampTitle = computed(() => {
 }
 
 .stamp {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
   color: var(--c-text-soft);
 }
 
-.stamp-synced {
-  color: var(--c-success);
-}
-
-.stamp-pending {
-  color: var(--c-accent-strong);
+.stamp::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: currentColor;
+  flex-shrink: 0;
 }
 
 .stamp-danger {