Simplify client overview access controls and layout

src/web/styles.css

@@ -1682,7 +1682,7 @@ p {
 }
 
 .client-state-copy {
-  min-height: 54px;
+  min-height: 76px;
 }
 
 .client-power {
@@ -1829,7 +1829,7 @@ p {
 }
 
 .client-state-detail {
-  min-height: 20px;
+  min-height: 44px;
   display: grid;
   place-items: center;
   margin-top: 8px;
@@ -1863,6 +1863,20 @@ p {
   place-items: center;
 }
 
+.client-duration-words {
+  display: grid;
+  place-items: center;
+  gap: 3px;
+}
+
+.client-duration-word-row {
+  min-height: 19px;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  white-space: nowrap;
+}
+
 .client-duration-unit {
   display: inline-flex;
   align-items: baseline;
@@ -1908,7 +1922,7 @@ p {
 
 .client-duration-toggle {
   width: min(290px, 100%);
-  min-height: 24px;
+  min-height: 44px;
   display: grid;
   place-items: center;
   padding: 0;
@@ -1966,6 +1980,19 @@ p {
   transition-delay: 20ms, 20ms, 20ms, 0s;
 }
 
+.client-duration-toggle > .client-tooltip {
+  top: 50%;
+  right: calc(100% + 12px);
+  bottom: auto;
+  left: auto;
+  transform: translate(2px, -50%);
+}
+
+.client-duration-toggle:hover > .client-tooltip,
+.client-duration-toggle:focus-visible > .client-tooltip {
+  transform: translate(0, -50%);
+}
+
 .client-icon-tooltip {
   width: 16px;
   height: 16px;
@@ -3071,8 +3098,12 @@ p {
   margin-top: 6px;
 }
 
-.client-proxies.has-tabs {
-  min-height: 91px;
+.client-proxies.is-gateway {
+  width: 270px;
+}
+
+.client-proxies.is-gateway .client-copy-button {
+  width: 82px;
 }
 
 .client-proxy-label {
@@ -3136,47 +3167,11 @@ p {
   animation: client-access-reveal 450ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
-.client-access-point[hidden] {
-  display: none;
-}
-
 @keyframes client-access-reveal {
   0% { opacity: 0; filter: blur(4px); }
   100% { opacity: 1; filter: blur(0); }
 }
 
-.client-access-tabs {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  width: 220px;
-  margin-bottom: 8px;
-  border-bottom: 1px solid var(--client-border);
-}
-
-.client-access-tabs .client-access-tab {
-  width: auto;
-  padding: 6px 4px 7px;
-  border: 0;
-  border-bottom: 1px solid transparent;
-  background: transparent;
-  color: var(--client-muted);
-  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  letter-spacing: 0.06em;
-  cursor: pointer;
-  transition: color 220ms ease, border-color 300ms ease, filter 300ms ease;
-}
-
-.client-access-tabs .client-access-tab.is-active {
-  border-bottom-color: var(--client-accent);
-  color: var(--client-text);
-  filter: drop-shadow(0 0 5px color-mix(in oklch, var(--client-accent) 45%, transparent));
-}
-
-.client-access-tab:focus-visible {
-  outline: 2px solid var(--client-accent);
-  outline-offset: 2px;
-}
-
 .client-proxy-actions {
   display: flex;
   gap: 8px;
@@ -3457,7 +3452,11 @@ p {
     right: 8px;
   }
 
-  .client-access-tabs .client-access-tab,
+  .client-duration-toggle > .client-tooltip {
+    right: calc(50% + 36px);
+    max-width: 110px;
+  }
+
   .client-copy-button {
     min-height: 44px;
     font-size: 10px;
@@ -3574,7 +3573,6 @@ p {
   .client-server-group-toggle,
   .client-server-more,
   .client-copy-button,
-  .client-access-tab,
   .client-access-point,
   .client-copy-feedback,
   .client-duration,