Refine Harbor delete flow and gateway affordances

src/web/styles.css

@@ -200,6 +200,7 @@ p {
   color: var(--harbor-gateway);
 }
 
+.harbor-mode-control,
 .harbor-mode-stack {
   position: relative;
   display: inline-block;
@@ -207,6 +208,11 @@ p {
   height: 1.25em;
 }
 
+.harbor-mode-stack {
+  width: 100%;
+  height: 100%;
+}
+
 .harbor-mode-stack em {
   position: absolute;
   inset: 0 auto auto 0;
@@ -240,6 +246,26 @@ p {
   transform: none;
 }
 
+.harbor-brand-control:hover .harbor-mode-connect,
+.harbor-brand-control:focus-visible .harbor-mode-connect {
+  transform: translateY(-0.14em);
+}
+
+.harbor-brand-control:hover .harbor-mode-gateway,
+.harbor-brand-control:focus-visible .harbor-mode-gateway {
+  transform: translate(0.42em, 0.5em) scale(0.96);
+}
+
+.harbor-brand.is-gateway-active .harbor-brand-control:hover .harbor-mode-connect,
+.harbor-brand.is-gateway-active .harbor-brand-control:focus-visible .harbor-mode-connect {
+  transform: translate(0.42em, 0.5em) scale(0.96);
+}
+
+.harbor-brand.is-gateway-active .harbor-brand-control:hover .harbor-mode-gateway,
+.harbor-brand.is-gateway-active .harbor-brand-control:focus-visible .harbor-mode-gateway {
+  transform: translateY(-0.14em);
+}
+
 .harbor-brand .harbor-mode-swap {
   position: absolute;
   top: 50%;
@@ -256,8 +282,8 @@ p {
 .harbor-mode-tooltip {
   position: absolute;
   bottom: calc(100% + 9px);
-  left: 50%;
-  width: 116px;
+  left: 0;
+  width: calc(100% + 22px);
   display: grid;
   gap: 2px;
   padding: 5px 6px;
@@ -274,7 +300,7 @@ p {
   visibility: hidden;
   filter: blur(2px);
   pointer-events: none;
-  transform: translate(-50%, 3px);
+  transform: translateY(3px);
   transition: opacity 240ms ease, filter 320ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 400ms;
 }
 
@@ -288,7 +314,7 @@ p {
   opacity: 1;
   visibility: visible;
   filter: blur(0);
-  transform: translate(-50%, 0);
+  transform: translateY(0);
   transition-delay: 120ms, 120ms, 120ms, 0s;
 }
 
@@ -904,12 +930,105 @@ p {
   transition: left 850ms cubic-bezier(0.16, 1, 0.3, 1), transform 850ms cubic-bezier(0.16, 1, 0.3, 1), width 850ms cubic-bezier(0.16, 1, 0.3, 1), opacity 650ms cubic-bezier(0.16, 1, 0.3, 1), filter 650ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.client-form-content {
+  display: grid;
+  gap: 36px;
+  opacity: 1;
+  filter: blur(0);
+  transition: opacity 360ms ease, filter 480ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-form.is-confirming-delete .client-form-content {
+  opacity: 0;
+  filter: blur(8px);
+  pointer-events: none;
+}
+
+.client-delete-confirmation {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: grid;
+  align-content: center;
+  gap: 10px;
+  padding: 28px;
+  border-radius: 20px;
+  background: color-mix(in oklch, var(--client-panel) 88%, transparent);
+  box-shadow: 0 20px 54px oklch(0.08 0.015 145 / 0.12);
+  backdrop-filter: blur(16px);
+  animation: client-delete-reveal 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.client-delete-confirmation > span {
+  color: oklch(0.68 0.15 28);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.client-delete-confirmation h2 {
+  font-size: 18px;
+  letter-spacing: -0.04em;
+}
+
+.client-delete-confirmation p {
+  color: var(--client-muted);
+  font-size: 10px;
+  line-height: 1.65;
+}
+
+.client-delete-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.client-delete-actions button {
+  padding: 8px 12px;
+  border: 0;
+  border-radius: 9px;
+  background: color-mix(in oklch, var(--client-control) 74%, transparent);
+  color: var(--client-text);
+  font-size: 10px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: color 220ms ease, background 220ms ease, transform 220ms ease;
+}
+
+.client-delete-actions button:hover:not(:disabled),
+.client-delete-actions button:focus-visible {
+  outline: none;
+  background: var(--client-control);
+  transform: translateY(-1px);
+}
+
+.client-delete-actions .is-danger {
+  color: oklch(0.68 0.15 28);
+}
+
+.client-delete-actions button:disabled {
+  opacity: 0.45;
+  cursor: wait;
+}
+
+@keyframes client-delete-reveal {
+  from { opacity: 0; filter: blur(8px); transform: scale(0.97); }
+  to { opacity: 1; filter: blur(0); transform: scale(1); }
+}
+
 .client-form.is-waiting {
   opacity: 0;
   filter: blur(10px);
   pointer-events: none;
 }
 
+.client-shell:has(.harbor-brand.is-gateway-active) .client-form:not(.is-waiting) {
+  opacity: 0.34;
+  filter: grayscale(1) saturate(0);
+}
+
 .client-subscription {
   position: relative;
   min-width: 0;
@@ -945,6 +1064,16 @@ p {
   stroke-linejoin: round;
 }
 
+.client-subscription-delete .client-trash-lid {
+  transform-origin: 12px 7px;
+  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-subscription-delete:hover:not(:disabled) .client-trash-lid,
+.client-subscription-delete:focus-visible .client-trash-lid {
+  transform: translateY(-2px) rotate(-10deg);
+}
+
 .client-subscription-refresh:hover:not(:disabled) {
   color: var(--client-accent);
   filter: drop-shadow(0 0 6px color-mix(in oklch, var(--client-accent) 55%, transparent));
@@ -1674,6 +1803,14 @@ p {
     transition: none;
   }
 
+  .client-form-content,
+  .client-delete-confirmation,
+  .client-delete-actions button,
+  .client-subscription-delete .client-trash-lid {
+    transition: none;
+    animation: none;
+  }
+
   .client-state-copy h2,
   .client-state-detail > * {
     animation: none;