refactor(frontend): derive the sweep-row visual language into sweep-shared.css (#3207)

The note sweep, rule sweep, preference drift and rule history panes each
restated the same row recipe in a scoped block. It now lives once in
assets/sweep-shared.css under `sweep-` names (unprefixed globals would
leak into the unrelated scoped .row-title/.lede/.age/.actions elsewhere),
imported unscoped beside each pane's own scoped remainder.

Moved only what was shared: RuleHistoryPanel takes .sweep-state and keeps
its button row head; PreferenceDrift keeps its tiny-type footnote and
overrides the action row's layout. Lede and state now use the body-sm
token instead of 0.85rem/0.9rem (13px vs 13.6/14.4px) — one value, from
the design system.

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

frontend/src/components/rules/PreferenceDriftPane.vue

@@ -77,7 +77,7 @@ onMounted(() => store.fetchDrift());
   <section class="pane drift">
     <header>
       <h2>Recent changes</h2>
-      <p class="lede">
+      <p class="sweep-lede">
         Preferences Scribe rewrote while working, most recently changed first. A
         preference is how you want work done, so sessions keep it current
         without asking — this is where you see what they decided. Rules are not
@@ -85,18 +85,18 @@ onMounted(() => store.fetchDrift());
       </p>
     </header>
 
-    <p v-if="store.loading" class="state">Loading…</p>
+    <p v-if="store.loading" class="sweep-state">Loading…</p>
 
     <!-- Nothing changed is the ordinary state and must not read as a fault. -->
-    <p v-else-if="!store.drift.length" class="state empty">
+    <p v-else-if="!store.drift.length" class="sweep-state empty">
       Nothing has been rewritten. A preference appears here the first time a
       session changes one — until then there is nothing to review.
     </p>
 
-    <ol v-else class="rows">
-      <li v-for="row in store.drift" :key="row.rule.id" class="row">
-        <div class="row-head">
-          <button class="row-title" @click="emit('open-rule', row.rule.id)">
+    <ol v-else class="sweep-rows">
+      <li v-for="row in store.drift" :key="row.rule.id" class="sweep-row">
+        <div class="sweep-row-head">
+          <button class="sweep-row-title" @click="emit('open-rule', row.rule.id)">
             {{ row.rule.title }}
           </button>
           <span class="when">{{ stamp(row.previous.created_at) }}</span>
@@ -122,10 +122,10 @@ onMounted(() => store.fetchDrift());
             <span class="was">Was:</span> {{ row.previous.when_to_apply || "nothing" }}
           </p>
           <DiffView v-if="diffFor(row).length" :diff="diffFor(row)" />
-          <p v-else class="state">
+          <p v-else class="sweep-state">
             The statement is unchanged — this edit moved another field.
           </p>
-          <div class="actions">
+          <div class="sweep-actions">
             <button
               :disabled="busyId === row.rule.id"
               @click="restore(row)"
@@ -150,27 +150,6 @@ onMounted(() => store.fetchDrift());
 <style src="@/assets/rules-shared.css" />
 <style scoped>
 .drift { display: flex; flex-direction: column; gap: var(--fs-space-3); }
-.lede {
-  margin: 0; max-width: 62ch; font-size: var(--fs-size-body-sm);
-  color: var(--fs-text-secondary); line-height: var(--fs-leading-body);
-}
-
-.state { margin: 0; font-size: var(--fs-size-body-sm); color: var(--fs-text-secondary); }
-.state.empty { color: var(--fs-text-tertiary); }
-
-.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fs-space-3); }
-.row {
-  background: var(--fs-surface-raised);
-  border-radius: var(--fs-radius-md);
-  padding: var(--fs-space-3);
-}
-.row-head { display: flex; align-items: baseline; gap: var(--fs-space-2); flex-wrap: wrap; }
-.row-title {
-  background: none; border: none; padding: 0; cursor: pointer;
-  font-family: Fraunces, serif; font-style: italic; font-size: 1.02rem;
-  color: var(--fs-text-primary); text-align: left;
-}
-.row-title:hover { text-decoration: underline; }
 .when {
   margin-left: auto; font-size: var(--fs-size-tiny);
   color: var(--fs-text-secondary); font-variant-numeric: tabular-nums;
@@ -205,19 +184,14 @@ onMounted(() => store.fetchDrift());
 }
 .was { color: var(--fs-text-tertiary); }
 
-.actions { display: flex; align-items: baseline; gap: var(--fs-space-3); flex-wrap: wrap; }
-.actions button {
-  cursor: pointer; font: inherit; font-size: 0.78rem;
-  background: var(--fs-surface-page); color: var(--fs-text-primary);
-  border: 1px solid var(--fs-border-color); border-radius: var(--fs-radius-md);
-  padding: 0.25rem 0.6rem;
-}
-.actions button:hover:not(:disabled) { background: var(--fs-surface-hover); }
-.actions button:disabled { opacity: var(--fs-disabled-opacity); cursor: default; }
 .actions-note {
   flex: 1; min-width: 18ch; font-size: var(--fs-size-tiny);
   color: var(--fs-text-tertiary); line-height: var(--fs-leading-body);
 }
 
 .footnote { margin: 0; max-width: 62ch; font-size: var(--fs-size-tiny); color: var(--fs-text-tertiary); line-height: var(--fs-leading-body); }
+/* Drift's buttons sit beside a note inside the expanded detail, not under a
+   row of facts. */
+.sweep-actions { align-items: baseline; gap: var(--fs-space-3); flex-wrap: wrap; margin-top: 0; }
 </style>
+<style src="@/assets/sweep-shared.css" />