More tweaks

src/pages/app.css

@@ -118,6 +118,7 @@ header nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gri
     background: none;
     border: none;
     border-radius: 6px;
+    color: var(--accent);
     cursor: pointer;
     padding: 0.35rem 0.6rem;
     text-align: left;
@@ -134,6 +135,35 @@ header nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gri
 
 .nav-auth .nav-dropdown { left: auto; right: 0; }
 
+/* ---- Login ---- */
+
+.login {
+    background: radial-gradient(circle at 50% 0%, #ddf4ff66, transparent 70%);
+    display: flex;
+    justify-content: center;
+    min-height: 60vh;
+    padding: var(--grid-4) 0;
+}
+
+.login-card {
+    align-self: center;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-top: 4px solid var(--accent);
+    border-radius: var(--radius);
+    box-shadow: 0 8px 24px #00000018;
+    max-width: 24rem;
+    padding: var(--grid-3) var(--grid-3) var(--grid-2);
+    text-align: center;
+    width: 100%;
+}
+
+.login-card .login-emblem { height: 6rem; width: auto; }
+
+.login-card form { text-align: left; }
+
+.login-card button[type="submit"] { width: 100%; }
+
 /* Hover/focus surface the panel of a closed menu; [open] pins it.
    The content-visibility override accompanies display because modern
    engines hide a closed <details>' slot content that way. */

src/pages/login.html

@@ -20,17 +20,21 @@
     </script>
 </head>
 <body>
-    <section>
-        <h2>Log in</h2>
-        <p stm-if="auth != null">Already signed in as <strong stm-text="auth.display_name">user</strong>.</p>
-        <form stm-if="auth == null" stm-action="page.login" style="max-width: 24rem">
-            <div class="form-row"><label for="login-username">Username</label>
-                <input id="login-username" type="text" name="username" required autocomplete="username" autofocus></div>
-            <div class="form-row"><label for="login-password">Password</label>
-                <input id="login-password" type="password" name="password" required autocomplete="current-password"></div>
-            <button type="submit">Log in</button>
-        </form>
-        <p class="error" id="login-error" hidden></p>
+    <section class="login">
+        <div class="login-card">
+            <img class="login-emblem" alt="" pstm-res-src="clanker-saddle-emblem.png">
+            <h2>Log in</h2>
+            <p class="muted">The agent works while you sleep.</p>
+            <p stm-if="auth != null">Already signed in as <strong stm-text="auth.display_name">user</strong>.</p>
+            <form stm-if="auth == null" stm-action="page.login">
+                <div class="form-row"><label for="login-username">Username</label>
+                    <input id="login-username" type="text" name="username" required autocomplete="username" autofocus></div>
+                <div class="form-row"><label for="login-password">Password</label>
+                    <input id="login-password" type="password" name="password" required autocomplete="current-password"></div>
+                <button type="submit" class="primary">Log in</button>
+            </form>
+            <p class="error" id="login-error" hidden></p>
+        </div>
     </section>
 </body>
 </html>

src/pages/main.html

@@ -20,6 +20,7 @@
             <details class="nav-menu" name="nav-menu">
                 <summary>Work</summary>
                 <div class="nav-dropdown">
+                    <a href="/">Dashboard</a>
                     <a href="/tasks">Tasks</a>
                     <a class="nav-goal" href="/goals"><em class="goal-icon">🎯</em> Goals</a>
                 </div>