release: v0.20.0

components/PasswordGate.module.css

@@ -2,6 +2,7 @@
 
 .gate {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: calc(100vh - var(--header-height));
@@ -43,23 +44,17 @@
   width: 100%;
   padding: 12px 16px;
   background: var(--bg-primary);
-  border: 1px solid var(--border-subtle);
+  border: 1px solid var(--input-border);
   border-radius: var(--radius-md);
   color: var(--text-primary);
   font-family: var(--font-sans);
   font-size: 0.9rem;
-  transition: border-color var(--transition-fast);
 }
 
-/* The base rule used to set `outline: none`, leaving a 1px border colour
-   change as the only focus signal. That is too little on a page whose only
-   purpose is typing, and a colour-only cue can be lost on colour-blind
-   visitors. The border change stays; the ring is added. */
-.input:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-color: var(--accent);
-}
+/* No focus rule of its own: the global one in app/tokens.css draws the ring.
+   This used to add an accent ring on top of an accent border — two red
+   outlines on the one page whose only purpose is typing, and a different
+   signal from every other control on the site. */
 
 .input::placeholder {
   color: var(--text-muted);
@@ -114,6 +109,17 @@
   }
 }
 
+/* Legal links under the site gate's card: the footer the gate has no room
+   for. The links themselves take the footer's .footer__legal-link styling, so
+   every preset sets them the way it sets its footer. */
+.legal {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px 20px;
+  margin-top: 24px;
+}
+
 /* ── Responsive ──────────────────────────────────── */
 @media (max-width: 640px) {
   .card {