src/app/globals.css

@@ -91,6 +91,8 @@
 @layer reset {
   *, *::before, *::after { box-sizing: border-box; }
   body { margin: 0; }
+  /* Form controls take the page font instead of the UA's 13.33px Arial. */
+  button, input, textarea, select { font: inherit; }
 }
 
 @layer base {

src/app/layout.tsx

@@ -16,7 +16,6 @@ import "../styles/trending.css";
 import "../styles/search.css";
 import "../styles/mobile.css";
 import "../styles/sheet.css";
-import "../styles/legacy.css";
 
 const manrope = Manrope({
   subsets: ["latin"],

src/components/Composer.tsx

@@ -210,7 +210,7 @@ export function Composer({ value, busy, error, file = null, onChange, onFile, on
         </div>
       ) : null}
       {error ? (
-        <p className="error" role="alert">Publishing the post failed. Your text is still here.</p>
+        <p className="composer-error" role="alert">Publishing the post failed. Your text is still here.</p>
       ) : null}
       <div className="composer-bar">
         {onFile ? (

src/components/SignInForm.tsx

@@ -44,7 +44,7 @@ export function SignInForm({ onSignedIn }: { onSignedIn: (p: Person) => void })
         </div>
         <form className="signin-form" onSubmit={submit} noValidate>
           {error && (
-            <p role="alert" className="error signin-error">
+            <p role="alert" className="signin-error">
               {error}
             </p>
           )}

src/styles/buttons.css

@@ -2,8 +2,8 @@
  * Button system (spec "Buttons", ADR 0001 sections 6 to 8).
  * Five styles plus the glossy crimson icon button, ported from the mockup's
  * recolored rules. Tokens only; white and black appear only on crimson faces.
- * Every class sets margin, padding, font and color itself so the legacy
- * `button` rules and any `button { color: inherit }` never leak in.
+ * Every class sets margin, padding, font and color itself so no global
+ * `button` rule, such as `button { color: inherit }`, can leak in.
  */
 
 /* Shared base for every style. */
@@ -242,7 +242,7 @@
 .btn-depth .btn-depth-icon svg { width: 20px; height: 20px; }
 .btn-depth .btn-depth-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
 .btn-depth .btn-depth-label { font-size: 15px; font-weight: 700; color: inherit; }
-.btn-depth .btn-depth-sub { font-size: 12.5px; color: var(--ink-3); transition: color .3s; }
+.btn-depth .btn-depth-sub { font-size: 12.5px; font-weight: 500; color: var(--ink-3); transition: color .3s; }
 .btn-depth:hover,
 .btn-depth:focus-visible { color: var(--on-accent); }
 .btn-depth:hover::before,

src/styles/composer.css

@@ -220,3 +220,6 @@
   .composer-att,
   .composer-prog i { animation: none !important; }
 }
+
+/* Publish failure, above the toolbar. */
+.composer-error { margin: 0 0 4px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 8px; color: var(--danger); background: var(--accent-soft); font-size: 14px; }

src/styles/layout.css

@@ -2,6 +2,9 @@
    .app is the size container; .bento is its child, so container queries can
    style it. The page never scrolls: only the panels' own lists do. */
 
+/* Session check: one centered line while the session loads. */
+.center { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
+
 .app {
   container: app / inline-size;
   height: 100vh;

src/styles/legacy.css

@@ -1,15 +0,0 @@
-/* Pre-redesign component rules, recolored with the tokens so the current
-   screens stay readable in both themes. Each redesign component task moves its
-   rules into its own file in src/styles/ (ADR 0001, section 6) and deletes them
-   here; the file goes when it is empty. Do not add new rules here.
-   Literal white and black are only text on crimson and video letterboxing. */
-.center { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
-label { font-size: 14px; font-weight: 500; margin-top: 8px; }
-input { font: inherit; padding: 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--tile-2); color: var(--ink); }
-input:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
-button { font: inherit; font-weight: 500; margin-top: 16px; padding: 12px; border: 0; border-radius: 8px; background: var(--accent); color: white; cursor: pointer; }
-.error { margin: 0 0 4px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 8px; color: var(--danger); background: var(--accent-soft); font-size: 14px; }
-
-
-
-

src/styles/post.css

@@ -1,7 +1,7 @@
 /*
  * Post card, comments and the own-post menu (spec "Post card", ADR 0001).
  * Prefixed `post-` classes, tokens only. Every button sets margin, padding,
- * font and color itself so the legacy `button` rule never leaks in.
+ * font and color itself so no global `button` rule leaks in.
  * --on-accent (white) appears only over video and on crimson faces.
  */
 @keyframes post-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

src/styles/signin.css

@@ -100,4 +100,4 @@
 }
 .signin-field input::placeholder { color: var(--ink-3); }
 .signin-form .signin-submit { margin-top: 18px; width: 100%; height: 54px; }
-.signin-error { margin: 0; }
+.signin-error { margin: 0; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 8px; color: var(--danger); background: var(--accent-soft); font-size: 14px; }