DRY pass #2, batch 5, F14: the web's repeated class lists become component classes (#5372)

style.css gains the classes the views spelled out in full: .section-label
(17 sites), .hint (20), .form-error (13), .alert-error (5), .row-card (5),
.list-empty (5), .field (5), .page-shell (3), and the small row action
.btn-sm (4) / .btn-sm-danger (3). Only exact runs moved, so nothing renders
differently; spacing a site adds beyond a run stays a utility beside it.

Kept: the Reminders and Timeline small buttons. They carry no text colour
and inherit it, so putting them on .btn-sm would recolour them.

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

frontend/src/components/GroupList.vue

@@ -140,16 +140,16 @@ onMounted(() => {
 
 <template>
   <section class="flex flex-col gap-5">
-    <h2 class="text-xs font-semibold uppercase tracking-wide text-neutral-400">Groups</h2>
+    <h2 class="section-label">Groups</h2>
 
     <form class="flex flex-wrap items-end gap-3" @submit.prevent="create">
       <BaseInput id="group-name" v-model="name" label="New group" placeholder="Family" class="min-w-48 flex-1" />
       <BaseButton type="submit" :loading="creating" :disabled="!name.trim()">Create group</BaseButton>
     </form>
 
-    <p v-if="error" class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
+    <p v-if="error" class="form-error">{{ error }}</p>
 
-    <div v-if="loading" class="py-6 text-center text-sm text-neutral-400">Loading…</div>
+    <div v-if="loading" class="list-empty">Loading…</div>
     <p v-else-if="empty" class="text-sm text-neutral-400">No groups yet.</p>
     <ul v-else class="flex flex-col gap-2">
       <li
@@ -167,7 +167,7 @@ onMounted(() => {
           <div class="flex shrink-0 items-center gap-2">
             <button
               type="button"
-              class="rounded-md border border-neutral-300 px-2.5 py-1 text-xs text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-50 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800"
+              class="btn-sm"
               :disabled="busy === g.id"
               @click="rename(g)"
             >
@@ -175,7 +175,7 @@ onMounted(() => {
             </button>
             <button
               type="button"
-              class="rounded-md border border-neutral-300 px-2.5 py-1 text-xs text-red-600 hover:bg-red-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-50 dark:border-neutral-700 dark:text-red-400 dark:hover:bg-red-950/40"
+              class="btn-sm-danger"
               :disabled="busy === g.id"
               @click="remove(g)"
             >
@@ -216,7 +216,7 @@ onMounted(() => {
           </select>
           <button
             type="submit"
-            class="rounded-md border border-neutral-300 px-2.5 py-1.5 text-xs text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-50 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800"
+            class="btn-sm py-1.5"
             :disabled="busy === g.id || !picks[g.id]"
           >
             Add