Simplify rail motion and add routing help toggle

src/web/styles/features/routing.css

@@ -537,8 +537,11 @@
   margin-top: 4px;
 }
 
-.client-local-rules-help summary {
+.client-local-rules-help > button {
   width: fit-content;
+  padding: 0;
+  border: 0;
+  background: transparent;
   color: var(--client-muted);
   font: var(--type-label);
   letter-spacing: var(--type-label-tracking);
@@ -547,14 +550,31 @@
   transition: color 220ms ease, text-shadow 300ms ease;
 }
 
-.client-local-rules-help summary:hover,
-.client-local-rules-help summary:focus-visible {
+.client-local-rules-help > button:hover,
+.client-local-rules-help > button:focus-visible {
   outline: 0;
   color: var(--client-accent);
   text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 34%, transparent);
 }
 
-.client-local-rules-help > div {
+.client-local-rules-help-reveal {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition: grid-template-rows 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
+}
+
+.client-local-rules-help.is-open .client-local-rules-help-reveal {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.client-local-rules-help-content {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.client-local-rules-help-copy {
   max-width: 48ch;
   display: grid;
   gap: 8px;
@@ -562,10 +582,15 @@
   padding: 10px 12px;
   border-radius: 10px;
   background: color-mix(in oklch, var(--client-accent) 5%, transparent);
-  animation: client-local-rules-notice 280ms ease both;
+  transform: translateY(-6px);
+  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-local-rules-help > div p {
+.client-local-rules-help.is-open .client-local-rules-help-copy {
+  transform: translateY(0);
+}
+
+.client-local-rules-help-copy p {
   max-width: 48ch;
   margin: 0;
   color: var(--client-muted);