More things

frontend/app/assets/css/_home.scss

@@ -8,10 +8,24 @@
     inset: -120px -20% auto -20%;
     height: 480px;
     pointer-events: none;
-    background:
-      radial-gradient(38% 60% at 30% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
-      radial-gradient(34% 55% at 72% 22%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%);
-    filter: blur(30px);
+  }
+}
+
+// the index page hangs its hero off the middle of the reading surface: only
+// `/` carries `.is-home`, so the stretch below stays here and the other pages
+// that share `.home-main` (the shelf, the two admin desks) are untouched.
+// `.app-main` already owns the viewport's height (flex: 1 beside the sidebar
+// on desktop, under the top bar on mobile); the container grows into it and
+// centres the page's block in what's left.
+.app-main:has(.home-main.is-home) {
+  display: flex;
+  flex-direction: column;
+
+  .container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
   }
 }
 
@@ -88,6 +102,18 @@
   &:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
 }
 
+// the hero box opens the search popup (the Ctrl/⌘+K one) instead of taking
+// text, so it is a button wearing the search bar: the label sits where typed
+// text would, in the placeholder's colour
+.search-input.search-trigger {
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  color: var(--faint);
+
+  &:hover { border-color: var(--accent); }
+}
+
 .search-kbd {
   position: absolute;
   right: 16px;