From a069c2fb2fba39038583c104f25a470b10bcc024 Mon Sep 17 00:00:00 2001
From: Cesar Alcazar <calcazar@dasnuve.com>
Date: Tue, 20 Oct 2026 09:07:23 -0600
Subject: [PATCH] 99puxwol5: Delete legacy.css and move its last rules into the
 component stylesheets

---
 src/app/globals.css           |  2 ++
 src/app/layout.tsx            |  1 -
 src/components/Composer.tsx   |  2 +-
 src/components/SignInForm.tsx |  2 +-
 src/styles/buttons.css        |  6 +++---
 src/styles/composer.css       |  3 +++
 src/styles/layout.css         |  3 +++
 src/styles/legacy.css         | 15 ---------------
 src/styles/post.css           |  2 +-
 src/styles/signin.css         |  2 +-
 10 files changed, 15 insertions(+), 23 deletions(-)
 delete mode 100644 src/styles/legacy.css

diff --git a/src/app/globals.css b/src/app/globals.css
index bbc11b1..7a53f8c 100644
--- a/src/app/globals.css
+++ b/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 {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1d69a50..d1d6c4a 100644
--- a/src/app/layout.tsx
+++ b/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"],
diff --git a/src/components/Composer.tsx b/src/components/Composer.tsx
index ba84a0b..4f71b45 100644
--- a/src/components/Composer.tsx
+++ b/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 ? (
diff --git a/src/components/SignInForm.tsx b/src/components/SignInForm.tsx
index d98d9d8..fdb040c 100644
--- a/src/components/SignInForm.tsx
+++ b/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>
           )}
diff --git a/src/styles/buttons.css b/src/styles/buttons.css
index 265e7a3..d62253f 100644
--- a/src/styles/buttons.css
+++ b/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,
diff --git a/src/styles/composer.css b/src/styles/composer.css
index 88a533b..0028599 100644
--- a/src/styles/composer.css
+++ b/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; }
diff --git a/src/styles/layout.css b/src/styles/layout.css
index d4933c7..a6c86e2 100644
--- a/src/styles/layout.css
+++ b/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;
diff --git a/src/styles/legacy.css b/src/styles/legacy.css
deleted file mode 100644
index 78e9510..0000000
--- a/src/styles/legacy.css
+++ /dev/null
@@ -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; }
-
-
-
-
diff --git a/src/styles/post.css b/src/styles/post.css
index a82a28d..c7bee35 100644
--- a/src/styles/post.css
+++ b/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; } }
diff --git a/src/styles/signin.css b/src/styles/signin.css
index 2da8d81..74a88f5 100644
--- a/src/styles/signin.css
+++ b/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; }