Simplify rail motion and add routing help toggle

src/web/styles/primitives.css

@@ -8,7 +8,6 @@
 }
 
 .client-rail-action {
-  --client-rail-state-duration: 340ms;
   position: relative;
   width: 42px;
   height: 48px;
@@ -19,7 +18,6 @@
   background: transparent;
   color: var(--client-muted);
   cursor: pointer;
-  transition: color 240ms ease, transform 440ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-rail-action svg {
@@ -31,12 +29,6 @@
   stroke-linecap: round;
   stroke-linejoin: round;
   overflow: visible;
-  transition: color 240ms ease, filter 360ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.client-rail-action:active:not(:disabled) svg {
-  transform: scale(0.94);
-  transition: color 120ms ease, filter 120ms ease, transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-rail-action > span {
@@ -58,7 +50,6 @@
 .client-rail-action:focus-visible {
   outline: 0;
   color: var(--client-accent);
-  transform: translateX(-3px);
 }
 
 .client-rail-action:hover > span,
@@ -74,157 +65,19 @@
   filter: drop-shadow(0 0 7px color-mix(in oklch, var(--client-accent) 52%, transparent));
 }
 
-.client-rail-subscription-back,
-.client-rail-subscription-front,
-.client-rail-book-page-position,
-.client-rail-book-spine,
-.client-rail-device-link,
-.client-rail-device-bridge,
-.client-rail-diagnostics-position,
-.client-rail-rule-knob-position {
-  transform-box: fill-box;
-  transform-origin: center;
-  transition: transform var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease, stroke-dasharray var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1), stroke-dashoffset var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.client-rail-book-page,
-.client-rail-diagnostics-glass,
-.client-rail-rule-knob {
-  transform-box: fill-box;
-  transform-origin: center;
-}
-
-.client-rail-book-page.is-right {
-  transform-origin: left center;
-}
-
 .client-rail-action .client-rail-subscription-card,
 .client-rail-action .client-rail-rule-knob {
   fill: var(--client-bg);
 }
 
-.client-rail-subscription-lines {
-  opacity: 1;
-}
-
-.client-subscription-toggle.is-open .client-rail-subscription-back {
-  transform: translate(1.5px, -1px);
-}
-
-.client-subscription-toggle.is-open .client-rail-subscription-front {
-  transform: translate(-2px, 1px);
-}
-
-.client-instructions-toggle.is-open .client-rail-book-page-position.is-left {
-  transform: translateX(-1.25px) rotate(-2.5deg);
-}
-
-.client-instructions-toggle.is-open .client-rail-book-page-position.is-right {
-  transform: translateX(1.25px) rotate(2.5deg);
-}
-
-.client-instructions-toggle.is-open .client-rail-book-spine {
-  transform: scaleY(1.06);
-}
-
 .client-rail-device-link {
   opacity: 0.68;
 }
 
-.client-rail-device-bridge {
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.client-rail-subscription-scan,
-.client-rail-device-packet,
-.client-rail-diagnostics-scan {
-  stroke-width: 2.4;
-  opacity: 0;
-  stroke-dasharray: 0.18 0.82;
-  stroke-dashoffset: 1;
-}
-
-.client-rail-device-packet {
-  stroke-dasharray: 0.36 0.64;
-}
-
-.client-devices-toggle.is-open .client-rail-device-link {
-  opacity: 1;
-}
-
-.client-devices-toggle.is-open .client-rail-device-bridge {
-  opacity: 1;
-  transform: scaleX(1);
-}
-
 .client-rail-diagnostics-trace {
   opacity: 0.72;
 }
 
-.client-diagnostics-toggle.is-open .client-rail-diagnostics-position {
-  transform: translate(2px, -1px) rotate(-7deg);
-}
-
-.client-local-rules-toggle.is-open .client-rail-rule-knob-position.is-top {
-  transform: translateX(4px);
-}
-
-.client-local-rules-toggle.is-open .client-rail-rule-knob-position.is-bottom {
-  transform: translateX(-4px);
-}
-
-.client-subscription-toggle.is-open .client-rail-subscription-scan,
-.client-devices-toggle.is-open .client-rail-device-packet,
-.client-diagnostics-toggle.is-open .client-rail-diagnostics-scan {
-  animation: client-rail-ambient-trace 10s 1.1s linear infinite;
-}
-
-.client-instructions-toggle.is-open .client-rail-book-page.is-right {
-  animation: client-rail-book-turn 10s 1.1s ease-in-out infinite;
-}
-
-.client-diagnostics-toggle.is-open .client-rail-diagnostics-glass {
-  animation: client-rail-glass-scan 10s 1.1s ease-in-out infinite;
-}
-
-.client-local-rules-toggle.is-open .client-rail-rule-knob.is-top {
-  animation: client-rail-rule-tune-top 10s 1.1s ease-in-out infinite;
-}
-
-.client-local-rules-toggle.is-open .client-rail-rule-knob.is-bottom {
-  animation: client-rail-rule-tune-bottom 10s 1.28s ease-in-out infinite;
-}
-
-@keyframes client-rail-ambient-trace {
-  0% { opacity: 0; stroke-dashoffset: 1; }
-  2% { opacity: 1; }
-  8% { opacity: 1; stroke-dashoffset: 0; }
-  10%, 100% { opacity: 0; stroke-dashoffset: 0; }
-}
-
-@keyframes client-rail-book-turn {
-  0%, 2%, 10%, 100% { transform: translateX(0) scaleX(1); }
-  5% { transform: translateX(-1px) scaleX(0.18); }
-  7% { transform: translateX(-0.5px) scaleX(0.55); }
-}
-
-@keyframes client-rail-glass-scan {
-  0%, 2%, 10%, 100% { transform: translateX(0) rotate(0); }
-  4% { transform: translateX(-3px) rotate(6deg); }
-  7% { transform: translateX(1.5px) rotate(-3deg); }
-}
-
-@keyframes client-rail-rule-tune-top {
-  0%, 2%, 10%, 100% { transform: translateX(0); }
-  6% { transform: translateX(-2px); }
-}
-
-@keyframes client-rail-rule-tune-bottom {
-  0%, 2%, 10%, 100% { transform: translateX(0); }
-  6% { transform: translateX(2px); }
-}
-
 .client-local-rules-toggle:disabled {
   cursor: default;
   color: var(--client-muted);
@@ -244,7 +97,6 @@
 }
 
 .client-rail-action.is-open {
-  --client-rail-state-duration: 480ms;
   color: var(--client-accent);
 }