Switch knob sat 7px off the edge: no preflight left the browser's button padding on ReUI buttons

button[data-slot] gets padding 0 in the base layer (ReUI size utilities and the
console's own styles still win). The switch's help now lines up under its label by
the switch's 32px, and the dead .toggle input CSS from the native-switch days is gone.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

src/theme/globals.css

@@ -69,6 +69,18 @@ the System / Light / Dark theme without a second palette.
   --color-destructive-foreground: var(--dan);
 }
 /*
+No preflight means a `<button>` keeps the browser's own `1px 6px` padding. The ReUI
+parts that are buttons with a fixed size (the switch, the checkbox, the dialog's close)
+would push their content off the edge by it: the switch's knob sat 7px in from the
+left when off. In the base layer, so a ReUI size utility (`px-2.5`) and the console's
+own unlayered styles still win over it.
+*/
+@layer base {
+  button[data-slot] {
+    padding: 0;
+  }
+}
+/*
 ---break---
 */
 .dark {

src/ui/Check.module.css

@@ -44,57 +44,5 @@
   max-width: 720px;
 }
 
-/*
-The switch. It is the same `input[type=checkbox]`, redrawn: the track is the
-input's own box and the knob is its offset inset shadow, so neither an extra
-element nor a pseudo-element the browser paints its own way is needed.
-*/
-.toggle input {
-  width: var(--ctrl-track-w);
-  height: var(--ctrl-track-h);
-  border-radius: var(--r-full);
-  background: var(--field);
-  background-image: none;
-  box-shadow:
-    var(--sunken),
-    inset calc(var(--ctrl-track-w) - var(--ctrl-track-h)) 0 0 -1px transparent;
-  position: relative;
-  transition:
-    background-color var(--t-fast),
-    border-color var(--t-fast);
-}
-
-/* The knob: a circle that travels from one end of the track to the other. */
-.toggle input::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: calc(var(--ctrl-track-h) - 6px);
-  height: calc(var(--ctrl-track-h) - 6px);
-  border-radius: var(--r-full);
-  background: var(--mute);
-  box-shadow: var(--shadow-knob);
-  transition: transform var(--t-medium), background var(--t-fast);
-}
-
-.toggle input:checked {
-  background-color: var(--acc);
-  background-image: none;
-  border-color: var(--acc-ink);
-  box-shadow: var(--edge-strong);
-}
-
-.toggle input:checked::after {
-  background: var(--on-acc);
-  transform: translateX(calc(var(--ctrl-track-w) - var(--ctrl-track-h)));
-}
-
-.toggle input:active:not(:disabled) { transform: none; }
-
-.toggle .help { margin-left: calc(var(--ctrl-track-w) + var(--s-6)); }
-
-@media (prefers-reduced-motion: reduce) {
-  .toggle input,
-  .toggle input::after { transition: none; }
-}
+/* The switch is ReUI's (32px wide), so its help lines up under the label by that width. */
+.helpSwitch { margin-left: calc(32px + var(--s-6)); }

src/ui/Check.tsx

@@ -56,7 +56,7 @@ export function Check({
           {label}
         </span>
       </div>
-      {help && <div className={styles.help}>{help}</div>}
+      {help && <div className={toggle ? `${styles.help} ${styles.helpSwitch}` : styles.help}>{help}</div>}
     </div>
   )
 }