feat(redesign): stack PageHeader meter top-right, button bottom-right

The hero's right column now spreads vertically — count + label pinned
at the top, action button(s) flushed to the bottom-right corner of
the card via margin-top: auto. Row uses align-items: stretch so the
side column reaches the full hero height regardless of how tall the
left column gets (long descriptions, many pills, etc.).

Single CSS change in the shared component, so it applies to every
page that uses PageHeader (all 14 of them) — no per-page edits.

frontend/src/lib/components/PageHeader.svelte

@@ -112,10 +112,11 @@
 		position: relative;
 		z-index: 1;
 		display: flex;
-		align-items: flex-start;
+		align-items: stretch;
 		justify-content: space-between;
 		gap: 1.5rem;
 		flex-wrap: wrap;
+		min-height: 100%;
 	}
 	.subpage-hero__main { min-width: 0; flex: 1; }
 
@@ -177,8 +178,8 @@
 
 	.subpage-hero__side {
 		display: flex;
-		align-items: center;
-		gap: 1.25rem;
+		flex-direction: column;
+		align-items: flex-end;
 		flex-shrink: 0;
 	}
 	.subpage-hero__meter {
@@ -188,6 +189,13 @@
 		align-items: flex-end;
 		justify-content: center;
 	}
+	.subpage-hero__actions {
+		margin-top: auto;
+		padding-top: 0.95rem;
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+	}
 	.subpage-hero__meter-value {
 		font-size: 2.15rem;
 		font-weight: 500;
@@ -204,11 +212,6 @@
 		margin-top: 0.4rem;
 		font-weight: 500;
 	}
-	.subpage-hero__actions {
-		display: flex;
-		gap: 0.5rem;
-		align-items: center;
-	}
 
 	@media (max-width: 640px) {
 		.subpage-hero { padding: 1.1rem 1.2rem 1.25rem; }