Improve routing rule drag handling and controls

src/web/styles/features/routing.css

@@ -111,7 +111,8 @@
   align-items: center;
   column-gap: 6px;
   padding: 4px 0;
-  background: linear-gradient(90deg, color-mix(in oklch, var(--client-rule-route-color) 8%, transparent), transparent 58%);
+  border-radius: 10px;
+  background: color-mix(in oklch, var(--client-rule-route-color) 6%, transparent);
   animation: client-row-enter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
   transition: background 320ms ease, box-shadow 180ms ease, opacity 260ms ease, filter 360ms ease;
 }
@@ -120,21 +121,6 @@
   --client-rule-route-color: light-dark(oklch(0.52 0.11 240), oklch(0.76 0.1 240));
 }
 
-.client-local-rule::after {
-  content: '';
-  position: absolute;
-  top: 10px;
-  bottom: 10px;
-  left: 0;
-  width: 2px;
-  border-radius: 999px;
-  background: var(--client-rule-route-color);
-  box-shadow: 0 0 7px color-mix(in oklch, var(--client-rule-route-color) 44%, transparent);
-  opacity: 0.78;
-  pointer-events: none;
-  transition: background 320ms ease, box-shadow 320ms ease, opacity 260ms ease;
-}
-
 .client-local-rule + .client-local-rule::before {
   content: '';
   position: absolute;
@@ -208,15 +194,10 @@
   filter: saturate(0);
 }
 
-.client-local-rule.is-disabled::after {
-  opacity: 0.22;
-  filter: saturate(0);
-}
-
 .client-local-rule.is-dragging {
   z-index: 6;
   animation: none;
-  background: linear-gradient(90deg, color-mix(in oklch, var(--client-rule-route-color) 13%, transparent), transparent 72%);
+  background: color-mix(in oklch, var(--client-rule-route-color) 11%, transparent);
   box-shadow: 0 10px 28px color-mix(in oklch, var(--client-rule-route-color) 16%, transparent);
   transform: translateY(var(--client-rule-drag-y));
 }
@@ -260,10 +241,14 @@
 }
 
 .client-rule-handle svg {
-  width: 12px;
-  height: 28px;
+  width: 18px;
+  height: 32px;
   overflow: visible;
+  padding: 2px 1px;
+  border-radius: 7px;
+  background: color-mix(in oklch, currentColor 6%, transparent);
   fill: currentColor;
+  transition: background 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-rule-handle:hover:not(:disabled),
@@ -278,32 +263,39 @@
   cursor: grabbing;
 }
 
+.client-rule-handle:hover:not(:disabled) svg,
+.client-rule-handle:focus-visible svg,
+.client-rule-handle[aria-pressed='true'] svg {
+  background: color-mix(in oklch, currentColor 12%, transparent);
+  transform: scale(1.04);
+}
+
 .client-rule-handle:disabled {
   opacity: 0.28;
   cursor: default;
 }
 
 .client-local-rule-enabled svg {
-  width: 20px;
-  height: 20px;
+  width: 18px;
+  height: 18px;
   overflow: visible;
   fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
   transition: color 260ms ease, filter 360ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-rule-switch-track {
-  fill: color-mix(in oklch, var(--client-muted) 16%, transparent);
-  stroke: currentColor;
-  stroke-width: 1;
-  transition: fill 260ms ease, stroke 260ms ease;
+.client-local-rule-enabled circle {
+  stroke-width: 1.4;
+  transition: fill 320ms ease, stroke 260ms ease;
 }
 
-.client-rule-switch-thumb {
-  fill: currentColor;
-  stroke: none;
-  transform-box: fill-box;
-  transform-origin: center;
-  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
+.client-rule-check {
+  stroke-width: 1.8;
+  stroke-dasharray: 12;
+  stroke-dashoffset: 12;
+  transition: opacity 160ms ease, stroke-dashoffset 360ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-local-rule-enabled[aria-checked='true'] {
@@ -311,15 +303,16 @@
 }
 
 .client-local-rule-enabled[aria-checked='true'] svg {
-  filter: drop-shadow(0 0 7px color-mix(in oklch, var(--client-rule-route-color) 42%, transparent));
+  filter: drop-shadow(0 0 7px color-mix(in oklch, var(--client-rule-route-color) 48%, transparent));
+  transform: scale(1.08);
 }
 
-.client-local-rule-enabled[aria-checked='true'] .client-rule-switch-track {
-  fill: color-mix(in oklch, var(--client-rule-route-color) 20%, transparent);
+.client-local-rule-enabled[aria-checked='true'] circle {
+  fill: color-mix(in oklch, var(--client-rule-route-color) 12%, transparent);
 }
 
-.client-local-rule-enabled[aria-checked='true'] .client-rule-switch-thumb {
-  transform: translateX(8px);
+.client-local-rule-enabled[aria-checked='true'] .client-rule-check {
+  stroke-dashoffset: 0;
 }
 
 .client-rule-type {