fix: stabilize Toolbox navigation layout

src/styles.css

@@ -123,7 +123,6 @@ summary:focus-visible {
   transform: translateY(0);
 }
 
-.portal-header .toolbox-shell__bar,
 main,
 .site-footer {
   width: min(1160px, calc(100% - 2.5rem));
@@ -192,13 +191,9 @@ main {
 
 .tool-controls {
   display: grid;
-  align-content: end;
+  grid-template-columns: minmax(0, 1fr) minmax(8.75rem, 10.5rem);
+  align-items: center;
   gap: 0.75rem;
-  padding: 1rem;
-  border: 1px solid var(--line);
-  border-radius: 1rem;
-  background: color-mix(in srgb, var(--surface) 88%, transparent);
-  box-shadow: var(--shadow);
 }
 
 .search-field,
@@ -212,7 +207,7 @@ main {
 }
 
 .search-field {
-  width: 100%;
+  min-width: 0;
   padding: 0 0.85rem;
   gap: 0.55rem;
 }
@@ -235,7 +230,7 @@ main {
 }
 
 .category-field {
-  width: 100%;
+  min-width: 0;
   padding: 0 0.65rem;
 }
 
@@ -244,15 +239,21 @@ main {
 }
 
 .hidden-toggle {
+  grid-column: 2;
   display: flex;
   align-items: center;
+  justify-self: end;
   gap: 0.45rem;
-  margin: 0.15rem 0 0;
   color: var(--muted);
   cursor: pointer;
   font-size: 0.88rem;
 }
 
+.hidden-toggle--disabled {
+  cursor: default;
+  opacity: 0.58;
+}
+
 .hidden-toggle input {
   width: 1.05rem;
   height: 1.05rem;
@@ -260,6 +261,7 @@ main {
 }
 
 .active-filter {
+  grid-column: 1;
   justify-self: start;
   padding: 0.4rem 0.65rem;
   border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
@@ -660,7 +662,6 @@ main {
   backdrop-filter: blur(5px);
 }
 
-.preferences-panel,
 .help-panel {
   width: min(560px, 100%);
   max-height: calc(100vh - 2rem);
@@ -672,7 +673,6 @@ main {
   box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
 }
 
-.preferences-panel > header,
 .help-panel > header {
   display: flex;
   align-items: flex-start;
@@ -680,18 +680,48 @@ main {
   gap: 1rem;
 }
 
-.preferences-panel h2,
 .help-panel h2 {
   margin: 0;
   font-family: Inter, Avenir, 'Segoe UI', sans-serif;
   letter-spacing: -0.025em;
 }
 
-.preferences-panel .eyebrow,
 .help-panel .eyebrow {
   margin-bottom: 0.5rem;
 }
 
+.portal-header .toolbox-shell__personalize-popover {
+  width: min(26rem, calc(100vw - 1.5rem));
+  max-height: calc(100vh - 5.5rem);
+  overflow: auto;
+}
+
+.preferences-content {
+  padding: 0.35rem;
+  color: var(--toolbox-text, var(--text));
+}
+
+.preferences-heading {
+  margin-bottom: 0.9rem;
+}
+
+.preferences-content h2 {
+  margin: 0;
+  font-family: Inter, Avenir, 'Segoe UI', sans-serif;
+  font-size: 1rem;
+  letter-spacing: -0.025em;
+}
+
+.portal-header .preferences-kicker {
+  margin: 0 0 0.3rem;
+  padding: 0;
+  color: var(--toolbox-accent, var(--brand));
+  font-size: 0.68rem;
+  font-weight: 750;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
 .help-steps {
   display: grid;
   gap: 0.85rem;
@@ -721,7 +751,7 @@ main {
 }
 
 .theme-choice {
-  margin: 1.5rem 0;
+  margin: 1rem 0;
   padding: 0;
   border: 0;
 }
@@ -767,7 +797,7 @@ main {
 .preference-summary > div {
   display: grid;
   gap: 0.2rem;
-  padding: 0.9rem;
+  padding: 0.65rem;
   border: 1px solid var(--line);
   border-radius: 0.7rem;
   text-align: center;
@@ -775,7 +805,7 @@ main {
 
 .preference-summary strong {
   font-family: Inter, Avenir, 'Segoe UI', sans-serif;
-  font-size: 1.25rem;
+  font-size: 1.05rem;
 }
 
 .preference-summary span,
@@ -785,8 +815,11 @@ main {
   font-size: 0.8rem;
 }
 
-.preferences-copy {
-  margin: 1.1rem 0;
+.portal-header .preferences-copy {
+  margin: 0.9rem 0;
+  padding: 0;
+  color: var(--toolbox-muted, var(--muted));
+  font-size: 0.78rem;
   line-height: 1.55;
 }
 
@@ -797,7 +830,7 @@ main {
 }
 
 .preferences-actions button {
-  padding: 0.62rem 0.78rem;
+  padding: 0.52rem 0.68rem;
 }
 
 .preferences-actions .danger-button {
@@ -805,12 +838,16 @@ main {
   color: var(--danger);
 }
 
-.action-message {
+.portal-header .action-message {
   min-height: 1.2em;
   margin: 0.8rem 0 0;
+  padding: 0;
+  color: var(--toolbox-muted, var(--muted));
+  font-size: 0.78rem;
 }
 
-.inline-warning {
+.portal-header .inline-warning {
+  margin: 0 0 0.75rem;
   padding: 0.7rem 0.8rem;
   border-radius: 0.6rem;
   background: color-mix(in srgb, var(--danger) 8%, var(--surface));
@@ -830,7 +867,6 @@ main {
 }
 
 @media (max-width: 700px) {
-  .portal-header .toolbox-shell__bar,
   main,
   .site-footer {
     width: min(100% - 1.4rem, 1160px);
@@ -870,6 +906,23 @@ main {
   }
 }
 
+@media (max-width: 520px) {
+  .tool-controls {
+    grid-template-columns: 1fr;
+  }
+
+  .search-field,
+  .category-field,
+  .active-filter,
+  .hidden-toggle {
+    grid-column: 1;
+  }
+
+  .hidden-toggle {
+    justify-self: start;
+  }
+}
+
 @media (min-width: 701px) and (max-width: 960px) {
   .hero {
     grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);