Simplify rail motion and add routing help toggle

src/web/features/routing/RoutingFeature.tsx

@@ -863,6 +863,7 @@ export function RoutingPendingStatus({
 }
 
 export function RoutingPanel({ feature, statusSlot }: { feature: RoutingFeature; statusSlot?: ReactNode }) {
+  const [helpOpen, setHelpOpen] = useState(false);
   const draftRules = feature.rules.filter((rule) => !rule.removing);
   const editorDisabled = feature.blocked || !feature.editable;
   const canAdd = canAppendRouteRule(draftRules) && !editorDisabled;
@@ -891,7 +892,6 @@ export function RoutingPanel({ feature, statusSlot }: { feature: RoutingFeature;
             Сохранить
           </button>
           <h2 id="local-rules-title">Правила маршрутизации</h2>
-          <p>Проверяются сверху вниз. Первое совпадение выбирает маршрут.</p>
           {!feature.editable && (
             <p className="client-local-rules-runtime" role="status">
               Обновите Harbor, чтобы редактировать правила.
@@ -912,14 +912,25 @@ export function RoutingPanel({ feature, statusSlot }: { feature: RoutingFeature;
               Правила сохранены и начнут работать после запуска Harbor.
             </p>
           )}
-          <details className="client-local-rules-help">
-            <summary>Как работают правила</summary>
-            <div>
-              <p>Правила проверяются сверху вниз. Первое совпадение выбирает маршрут: щит означает VPN, стрелка — прямое подключение.</p>
-              <p>Правила применяются только к трафику внутри маршрутизации Harbor. Gateway в режиме «Напрямую» и Connect при активном Harbor Gateway обходят локальный список.</p>
-              <p>Можно вставить полный URL: Harbor сразу оставит только домен. Путь и параметры HTTPS для маршрутизации недоступны.</p>
+          <div className={`client-local-rules-help${helpOpen ? ' is-open' : ''}`}>
+            <button
+              type="button"
+              aria-expanded={helpOpen}
+              aria-controls="client-local-rules-help-content"
+              onClick={() => setHelpOpen((current) => !current)}
+            >
+              Как работают правила
+            </button>
+            <div className="client-local-rules-help-reveal" aria-hidden={!helpOpen}>
+              <div id="client-local-rules-help-content" className="client-local-rules-help-content">
+                <div className="client-local-rules-help-copy">
+                  <p>Правила проверяются сверху вниз. Первое совпадение выбирает маршрут: щит означает VPN, стрелка — прямое подключение.</p>
+                  <p>Правила применяются только к трафику внутри маршрутизации Harbor. Gateway в режиме «Напрямую» и Connect при активном Harbor Gateway обходят локальный список.</p>
+                  <p>Можно вставить полный URL: Harbor сразу оставит только домен. Путь и параметры HTTPS для маршрутизации недоступны.</p>
+                </div>
+              </div>
             </div>
-          </details>
+          </div>
         </header>
 
         <form id="client-local-rules-form" className="client-local-rules-form" onSubmit={feature.save}>