fix(settings): the "open completed tasks" link was unstyled

It carried class="ghost", which nothing in the data page styles — so it
fell back to the browser's blue underline while every link beside it is
the accent-coloured .link. Now it matches them.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/routes/indstillinger/data/+page.svelte

@@ -285,7 +285,7 @@
 		<p class="hint">{t('data.doneHint')}</p>
 	</header>
 	<div class="row">
-		<a class="ghost" href="/faerdige">{t('data.openDone')}</a>
+		<a class="link" href="/faerdige">{t('data.openDone')}</a>
 	</div>
 </section>
 

web/src/routes/noter/+page.svelte

@@ -810,11 +810,7 @@
 										</svg>
 									</span>
 								{:else}
-									<!-- No arrow, to match the sidebar: the box folds on a click,
-									     the star and the people icon are the marks that mean
-									     something, and a date group has none — an empty spacer, so
-									     every label still starts at the same place. -->
-									<span class="mark" aria-hidden="true"></span>
+									<span class="mark" class:closed={folded.has(group.key)} aria-hidden="true">▾</span>
 								{/if}
 								{group.label}
 								<span class="count">{group.notes.length}</span>
@@ -1371,48 +1367,43 @@
 	 *
 	 * Baggrunden er ikke gennemsigtig. En klæbende overskrift uden en er en
 	 * overskrift med rækkerne kørende igennem sig. */
-	/* One design with the sidebar headings: a rounded box, the same corner as an
-	   active menu item, filled just enough to separate one group of notes from the
-	   next. The hard rule underneath is gone — the box is the separation now. */
 	h3.group {
 		position: sticky;
 		top: 0;
 		z-index: 1;
-		margin: 0 0 var(--s1);
+		margin: 0;
 		background: var(--ground);
-		border-radius: var(--radius);
+		border-bottom: 1px solid var(--line);
 	}
 
-	/* Bold and plainly cased, in the reading ink — the faint uppercase label read as
-	   a different app's heading beside the sidebar's. Menu size, so the two tiers of
-	   heading in front of the eye at once are the same size. */
 	h3.group button {
 		display: flex;
 		align-items: center;
 		gap: var(--s2);
 		width: 100%;
 		padding: var(--s2) var(--s2);
-		font-size: var(--menu-size);
+		font-size: var(--text-xs);
 		font-weight: 600;
-		letter-spacing: normal;
-		text-transform: none;
-		color: var(--ink);
-		border-radius: var(--radius);
+		letter-spacing: 0.07em;
+		text-transform: uppercase;
+		color: var(--ink-faint);
 	}
 
 	h3.group button:hover {
-		background: var(--surface-sunken);
+		color: var(--ink-muted);
 	}
 
-	/* The mark, or an empty box the same width where a date group has none, so every
-	   label starts at the same place. The star and the people icon fill it; the
-	   arrow that used to is gone — the box folds on a click. */
 	h3.group .mark {
 		flex: none;
 		width: 0.75em;
 		font-size: 0.85em;
 		line-height: 1;
 		color: var(--ink-faint);
+		transition: transform var(--fast) var(--ease);
+	}
+
+	h3.group .mark.closed {
+		transform: rotate(-90deg);
 	}
 
 	/* Sit eget navn og ikke `.star`. Rækkens favoritknap hedder også det og er
@@ -1428,7 +1419,6 @@
 		margin-left: auto;
 		font-weight: 500;
 		letter-spacing: 0;
-		color: var(--ink-muted);
 	}
 
 	/* Stregen mellem rækkerne er væk.