The preferences read as a ruled ledger

Rows rule apart with the games ledger's own brown line, fill the
panel's width so the checkbox column aligns, and control rows
right-justify their controls opposite their labels.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015RCWSTnb1KYTPyL4GmhGnF

packages/web/src/App.svelte

@@ -2837,11 +2837,15 @@
     display: flex;
     align-items: center;
     gap: 0.6rem;
-    margin: 0.55rem 0;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0.55rem 0.1rem;
     font-size: 0.85rem;
     color: #43331f;
     text-align: left;
     cursor: pointer;
+    border-top: 1.5px solid #6b5a41;
   }
   /* Checkboxes wear the table's own ink: a stamp-bordered box, checked
      solid with a parchment tick — the native widget never matches the
@@ -2870,6 +2874,12 @@
     font-weight: 700;
   }
   .pref-row span { flex: 1; }
+  /* Control rows read as a two-column table: the label holds the left
+     column, its controls right-align into the second. */
+  .pref-row > span:first-child { flex: 0 1 auto; }
+  .pref-row > span:first-child + .stamp,
+  .pref-row > span:first-child + input,
+  .pref-row > span:first-child + .pref-swatch { margin-left: auto; }
   .pref-note { font-size: 0.72rem; color: #8a7a5e; margin-top: 0.6rem; }
   .pref-name { max-width: 11rem; }
   .pref-swatch {