Restyle to a flat Miniflux-like design

- hairline separators instead of bordered rows, square corners, no shadows
- white background, system font stack, slimmer headings
- pine green accent; amber warn ramp carries the attention marks (due/late/mid)
- no hover backgrounds: hover is color/fill-state only
- reserve bold nav tab width and the scrollbar gutter so navigation never shifts layout

8 files changed, 53 insertions, 85 deletions

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 27b9b7f..cfd24f7 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -53,32 +53,25 @@
 	button {
 		cursor: pointer;
 		font-family: inherit;
-		transition: all 0.2s ease;
 		border: none;
 	}
 
 	button:disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
-		transform: none;
-		box-shadow: none;
 	}
 
 	.primary {
 		padding: 0.75rem 1.5rem;
-		border-radius: 0.75rem;
 		background: var(--accent);
 		color: var(--white);
 		font-size: 0.9375rem;
 		font-weight: 500;
 		align-self: flex-start;
-		box-shadow: 0 1px 2px var(--shadow);
 	}
 
 	.primary:hover:not(:disabled) {
 		background: var(--accent-hover);
-		transform: translateY(-1px);
-		box-shadow: 0 4px 8px var(--shadow-accent-lg);
 	}
 
 	.accent {
@@ -86,7 +79,6 @@
 		height: 3rem;
 		flex-shrink: 0;
 		padding: 0;
-		border-radius: 0.75rem;
 		background: var(--accent);
 		color: var(--white);
 		font-size: 1.25rem;
@@ -94,13 +86,10 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		box-shadow: 0 1px 2px var(--shadow);
 	}
 
 	.accent:hover:not(:disabled) {
 		background: var(--accent-hover);
-		transform: translateY(-1px);
-		box-shadow: 0 4px 8px var(--shadow-accent-lg);
 	}
 
 	.ghost {
@@ -108,7 +97,6 @@
 		width: 2rem;
 		aspect-ratio: 1;
 		padding: 0;
-		border-radius: 0.625rem;
 		background: transparent;
 		color: var(--text-secondary);
 		font-size: 1.25rem;
@@ -118,14 +106,12 @@
 	}
 
 	.ghost:hover:not(:disabled) {
-		background: var(--danger-hover-bg);
 		color: var(--danger);
 	}
 
 	.done {
 		flex-shrink: 0;
 		padding: 0.5rem 0.875rem;
-		border-radius: 0.625rem;
 		background: var(--success);
 		color: var(--white);
 		font-size: 0.875rem;
@@ -133,13 +119,11 @@
 	}
 
 	.done:hover:not(:disabled) {
-		filter: brightness(1.05);
-		transform: translateY(-1px);
+		background: oklch(from var(--success) calc(l - 0.05) c h);
 	}
 
 	.done.lg {
 		padding: 0.75rem 1.25rem;
-		border-radius: 0.75rem;
 		font-size: 0.9375rem;
 	}
 
@@ -148,10 +132,9 @@
 		height: 3rem;
 		flex-shrink: 0;
 		padding: 0;
-		border-radius: 0.75rem;
 		background: var(--surface);
 		color: var(--text-secondary);
-		border: 1.5px solid var(--border);
+		border: 1px solid var(--border);
 		font-size: 1.25rem;
 		font-weight: 500;
 		display: flex;
diff --git a/src/lib/components/FuzzyAutocomplete.svelte b/src/lib/components/FuzzyAutocomplete.svelte
index f5bef94..da7327e 100644
--- a/src/lib/components/FuzzyAutocomplete.svelte
+++ b/src/lib/components/FuzzyAutocomplete.svelte
@@ -129,8 +129,6 @@
 		padding: 0.25rem;
 		background: var(--surface);
 		border: 1px solid var(--border);
-		border-radius: 0.75rem;
-		box-shadow: 0 4px 12px var(--shadow-accent);
 		z-index: 20;
 		max-height: 16rem;
 		overflow-y: auto;
@@ -138,7 +136,6 @@
 
 	.dropdown li {
 		padding: 0.5rem 0.625rem;
-		border-radius: 0.5rem;
 		cursor: pointer;
 		display: flex;
 		align-items: center;
@@ -146,9 +143,13 @@
 		gap: 0.5rem;
 	}
 
-	.dropdown li:hover,
+	.dropdown li:hover {
+		color: var(--accent);
+	}
+
 	.dropdown li.active {
-		background: var(--surface-hover);
+		color: var(--accent);
+		font-weight: 700;
 	}
 
 	.name :global(mark) {
diff --git a/src/lib/components/GroceryRow.svelte b/src/lib/components/GroceryRow.svelte
index 9a88e90..8dc3f76 100644
--- a/src/lib/components/GroceryRow.svelte
+++ b/src/lib/components/GroceryRow.svelte
@@ -61,20 +61,11 @@
 		padding: 0 0.875rem;
 		height: 100%;
 		border: none;
-		border-radius: 0.75rem;
-		background: var(--surface);
+		background: transparent;
 		font-size: 1rem;
 		font-weight: 500;
 		display: flex;
 		align-items: center;
-		transition: all 0.2s ease;
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.toggle:hover {
-		background: var(--surface-hover);
-		box-shadow: 0 2px 6px var(--shadow-accent);
-		transform: translateY(-1px);
 	}
 
 	.label {
@@ -94,19 +85,12 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		border-radius: 0.75rem;
-		background: var(--surface);
 		color: var(--text-secondary);
 		text-decoration: none;
 		font-size: 1rem;
-		transition: all 0.2s ease;
-		box-shadow: 0 1px 2px var(--shadow);
 	}
 
 	.open:hover {
-		background: var(--surface-hover);
 		color: var(--accent);
-		box-shadow: 0 2px 6px var(--shadow-accent);
-		transform: translateY(-1px);
 	}
 </style>
diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
index aa42ace..c5fcc60 100644
--- a/src/lib/components/Nav.svelte
+++ b/src/lib/components/Nav.svelte
@@ -1,19 +1,27 @@
-<script lang="ts">
+<script>
 	import { page } from '$app/stores';
 </script>
 
 <nav class="navbar">
-	<a href="/" class:active={$page.url.pathname === '/'}>Projets</a>
-	<a href="/groceries" class:active={$page.url.pathname === '/groceries'}
-		>Liste</a
+	<a href="/" data-label="Projets" class:active={$page.url.pathname === '/'}
+		><span>Projets</span></a
+	>
+	<a
+		href="/groceries"
+		data-label="Liste"
+		class:active={$page.url.pathname === '/groceries'}><span>Liste</span></a
 	>
 	<a
 		href="/groceries/catalog"
-		class:active={$page.url.pathname === '/groceries/catalog'}>Catalogue</a
+		data-label="Catalogue"
+		class:active={$page.url.pathname === '/groceries/catalog'}
+		><span>Catalogue</span></a
 	>
 	<a
 		href="/groceries/categories"
-		class:active={$page.url.pathname === '/groceries/categories'}>Catégories</a
+		data-label="Catégories"
+		class:active={$page.url.pathname === '/groceries/categories'}
+		><span>Catégories</span></a
 	>
 </nav>
 
@@ -32,23 +40,37 @@
 	}
 
 	.navbar a {
-		padding: 0.5rem 1rem;
-		border-radius: 9999px;
+		height: 100%;
+		display: inline-grid;
+		align-content: center;
+		padding: 0 0.625rem;
+		font-size: 0.875rem;
 		color: var(--text-secondary);
 		text-decoration: none;
-		font-size: 0.875rem;
-		font-weight: 500;
-		transition: all 0.2s ease;
+	}
+
+	/* Bold ghost reserves the bold advance width in the same grid cell, so the
+	   active tab's font-weight change never moves its siblings. */
+	.navbar a::before {
+		content: attr(data-label);
+		grid-area: 1 / 1;
+		visibility: hidden;
+		font-weight: 700;
+	}
+
+	.navbar a span {
+		grid-area: 1 / 1;
 	}
 
 	.navbar a:hover {
 		color: var(--text);
-		background: var(--surface);
 	}
 
 	.navbar a.active {
-		background: var(--accent);
-		color: var(--white);
-		box-shadow: 0 1px 2px var(--shadow);
+		color: var(--text);
+	}
+
+	.navbar a.active span {
+		font-weight: 700;
 	}
 </style>
diff --git a/src/lib/components/Row.svelte b/src/lib/components/Row.svelte
index e388392..91c86a5 100644
--- a/src/lib/components/Row.svelte
+++ b/src/lib/components/Row.svelte
@@ -23,32 +23,15 @@
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
+		border-bottom: 1px solid var(--border);
 	}
 
 	.card {
 		padding: 0.5rem 0.75rem;
-		background: var(--surface);
-		border-radius: 0.75rem;
-		box-shadow: 0 1px 2px var(--shadow);
-		transition: all 0.2s ease;
-	}
-
-	.card:hover {
-		box-shadow: 0 2px 6px var(--shadow);
-		transform: translateY(-1px);
 	}
 
 	.ref {
 		padding: 0.875rem 1rem;
 		gap: 0.75rem;
-		background: var(--surface);
-		border-radius: 0.75rem;
-		box-shadow: 0 1px 2px var(--shadow);
-		transition: all 0.2s ease;
-	}
-
-	.ref:hover {
-		box-shadow: 0 2px 6px var(--shadow);
-		transform: translateY(-1px);
 	}
 </style>
diff --git a/src/lib/components/ScoreBadge.svelte b/src/lib/components/ScoreBadge.svelte
index ae11918..13205c2 100644
--- a/src/lib/components/ScoreBadge.svelte
+++ b/src/lib/components/ScoreBadge.svelte
@@ -11,7 +11,6 @@
 		flex-shrink: 0;
 		min-width: 2.75rem;
 		padding: 0.25rem 0.5rem;
-		border-radius: 9999px;
 		text-align: center;
 		font-size: 0.875rem;
 		font-weight: 700;
@@ -23,7 +22,7 @@
 	}
 
 	.mid {
-		background: var(--accent);
+		background: var(--warn);
 	}
 
 	.low {
diff --git a/src/lib/components/SectionTitle.svelte b/src/lib/components/SectionTitle.svelte
index be77a46..518b74a 100644
--- a/src/lib/components/SectionTitle.svelte
+++ b/src/lib/components/SectionTitle.svelte
@@ -11,13 +11,10 @@
 <style>
 	h2,
 	h3 {
-		font-size: 0.75rem;
+		font-size: 0.875rem;
 		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: var(--accent);
+		color: var(--text-secondary);
 		margin: 1.25rem 0 0.5rem;
 		padding-left: 0.5rem;
-		border-left: 3px solid var(--accent);
 	}
 </style>
diff --git a/src/lib/components/StatusBadge.svelte b/src/lib/components/StatusBadge.svelte
index 2bbdf5a..ffa976b 100644
--- a/src/lib/components/StatusBadge.svelte
+++ b/src/lib/components/StatusBadge.svelte
@@ -38,7 +38,6 @@
 		justify-content: center;
 		width: 1.5rem;
 		height: 1.5rem;
-		border-radius: 0.375rem;
 		font-size: 0.875rem;
 		font-weight: 700;
 		line-height: 1;
@@ -50,12 +49,12 @@
 	}
 
 	.due {
-		background: var(--shadow-accent);
-		color: var(--accent);
+		background: var(--warn-bg);
+		color: var(--warn);
 	}
 
 	.late {
-		background: var(--accent);
+		background: var(--warn);
 		color: var(--white);
 	}