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/NoteSweepPane.vue

@@ -83,42 +83,42 @@ defineExpose({ reload });
   <section class="sweep">
     <header>
       <h2>Due for verification</h2>
-      <p class="lede">
+      <p class="sweep-lede">
         Notes that assert a fact about something outside your control — what a
         service does, how a tool behaves. Most notes are decisions and never
         appear here; they have no truth value to go stale.
       </p>
     </header>
 
-    <div class="filters">
-      <label class="filter">
+    <div class="sweep-filters">
+      <label class="sweep-filter">
         <input v-model="neverOnly" type="checkbox" @change="reload" />
         <span>Never checked only</span>
       </label>
     </div>
 
-    <p v-if="loading" class="state">Loading…</p>
+    <p v-if="loading" class="sweep-state">Loading…</p>
 
     <!-- An empty sweep is GOOD NEWS and must not read like a broken page. -->
-    <p v-else-if="!rows.length" class="state empty">
+    <p v-else-if="!rows.length" class="sweep-state empty">
       Nothing to check.
       {{ neverOnly
         ? "Every note that carries a check has been confirmed at least once."
         : "No note carries a check yet — add one to a note that asserts a fact." }}
     </p>
 
-    <ol v-else class="rows">
-      <li v-for="n in rows" :key="n.id" class="row">
-        <div class="row-head">
-          <button class="row-title" @click="emit('open-note', n.id)">{{ n.title }}</button>
-          <span class="age" :class="{ unchecked: n.days_since_verified === null }">
+    <ol v-else class="sweep-rows">
+      <li v-for="n in rows" :key="n.id" class="sweep-row">
+        <div class="sweep-row-head">
+          <button class="sweep-row-title" @click="emit('open-note', n.id)">{{ n.title }}</button>
+          <span class="sweep-age" :class="{ unchecked: n.days_since_verified === null }">
             {{ n.days_since_verified === null
               ? "never checked"
               : `${n.days_since_verified}d ago` }}
           </span>
         </div>
 
-        <dl class="check">
+        <dl class="sweep-check">
           <dt>Check</dt>
           <dd>{{ n.verify_with }}</dd>
           <template v-if="n.expires_when">
@@ -127,14 +127,14 @@ defineExpose({ reload });
           </template>
         </dl>
 
-        <div class="actions">
+        <div class="sweep-actions">
           <button :disabled="busyId === n.id" @click="verify(n.id, true)">Still true</button>
           <button :disabled="busyId === n.id" @click="verify(n.id, false)">No longer true</button>
         </div>
       </li>
     </ol>
 
-    <p v-if="rows.length" class="footnote">
+    <p v-if="rows.length" class="sweep-footnote">
       Record a result only after actually running the check. “No longer true” stores nothing
       on purpose — the note is wrong rather than in a state worth recording, so it keeps its
       place here until you correct it, supersede it, or remove its check.
@@ -145,54 +145,8 @@ defineExpose({ reload });
 <style scoped>
 .sweep { display: flex; flex-direction: column; gap: var(--fs-space-3); }
 h2 { margin: 0; font-size: 1.05rem; }
-.lede {
-  margin: 0.35rem 0 0;
-  max-width: 62ch;
-  font-size: 0.85rem;
-  color: var(--fs-text-secondary);
-  line-height: 1.5;
-}
-
-.filters { display: flex; gap: var(--fs-space-5); align-items: center; flex-wrap: wrap; }
-.filter { display: flex; align-items: center; gap: var(--fs-space-2); font-size: 0.82rem; color: var(--fs-text-secondary); }
-.filter input[type="checkbox"] { accent-color: var(--fs-accent); }
-
-.state { margin: 0; font-size: 0.9rem; 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; }
-/* The ORDER carries urgency — the top of this list is the least-confirmed
-   thing in the corpus. No red/amber ramp: it would restate the ordering and
-   force an invented "stale after N days" threshold. "Never" is marked because
-   it is categorically DIFFERENT from a date, not a worse one. */
-.age { margin-left: auto; font-size: 0.78rem; color: var(--fs-text-secondary); font-variant-numeric: tabular-nums; }
-.age.unchecked { font-style: italic; color: var(--fs-text-tertiary); }
-
-.check { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem var(--fs-space-3); margin: var(--fs-space-3) 0 0; }
-.check dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fs-text-tertiary); }
-.check dd { margin: 0; font-size: 0.82rem; color: var(--fs-text-primary); min-width: 0; overflow-wrap: anywhere; }
-
-.actions { display: flex; gap: var(--fs-space-2); margin-top: var(--fs-space-3); }
-.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; }
-
-.footnote { margin: 0; max-width: 62ch; font-size: 0.78rem; color: var(--fs-text-tertiary); line-height: 1.45; }
+.sweep-lede { margin-top: 0.35rem; }
+/* A check can be a long URL or command with no break point. */
+.sweep-check dd { overflow-wrap: anywhere; }
 </style>
+<style src="@/assets/sweep-shared.css" />