Add gateway auto toggle for client mode

src/web/styles.css

@@ -105,6 +105,31 @@ p {
   pointer-events: none;
 }
 
+.harbor-brand.is-switchable {
+  pointer-events: auto;
+}
+
+.harbor-brand-control {
+  appearance: none;
+  border: 0;
+  border-radius: 7px;
+  padding: 3px 5px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  cursor: pointer;
+}
+
+.harbor-brand-control:focus-visible {
+  outline: 1px solid color-mix(in srgb, var(--harbor-gateway) 55%, transparent);
+  outline-offset: 4px;
+}
+
+.harbor-brand-control:disabled {
+  cursor: wait;
+}
+
 .client-shell.is-first-run .harbor-brand {
   transform: translate(-50%, calc(-50% - 72px)) scale(1.35);
 }
@@ -153,6 +178,12 @@ p {
   font-weight: 800;
 }
 
+.harbor-brand-name {
+  display: flex;
+  align-items: center;
+  gap: 0.45em;
+}
+
 .harbor-brand em {
   color: var(--harbor-connect);
   font-style: normal;
@@ -163,6 +194,61 @@ p {
   color: var(--harbor-gateway);
 }
 
+.harbor-mode-stack {
+  position: relative;
+  display: inline-block;
+  width: 7.2em;
+  height: 1.25em;
+}
+
+.harbor-mode-stack em {
+  position: absolute;
+  inset: 0 auto auto 0;
+  transition: color 420ms ease, opacity 420ms ease, filter 420ms ease, transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.harbor-mode-connect {
+  z-index: 2;
+  color: var(--harbor-connect);
+}
+
+.harbor-mode-gateway {
+  z-index: 1;
+  color: var(--harbor-gateway);
+  opacity: 0.2;
+  filter: blur(0.4px);
+  transform: translate(0.42em, 0.34em) scale(0.96);
+}
+
+.harbor-brand.is-gateway-active .harbor-mode-connect {
+  z-index: 1;
+  opacity: 0.18;
+  filter: blur(0.4px);
+  transform: translate(0.42em, 0.34em) scale(0.96);
+}
+
+.harbor-brand.is-gateway-active .harbor-mode-gateway {
+  z-index: 2;
+  opacity: 1;
+  filter: none;
+  transform: none;
+}
+
+.harbor-brand .harbor-mode-swap {
+  width: 14px;
+  height: 14px;
+  opacity: 0.42;
+  stroke-width: 1.35;
+  transition: color 320ms ease, opacity 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.harbor-brand-control:hover .harbor-mode-swap,
+.harbor-brand-control:focus-visible .harbor-mode-swap {
+  color: var(--harbor-gateway);
+  opacity: 1;
+  transform: translateX(1px);
+}
+
 .client-instructions-toggle {
   position: fixed;
   top: 50%;
@@ -1529,6 +1615,11 @@ p {
     animation: none;
   }
 
+  .harbor-mode-stack em,
+  .harbor-brand .harbor-mode-swap {
+    transition: none;
+  }
+
   .client-state-copy h2,
   .client-state-detail > * {
     animation: none;