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

1 files changed, 1 insertions, 17 deletions

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>