4b04bd017d7a36d460447d8552ecaf9c8a33db4a
max
  Tue Aug 4 02:51:56 2026 -0700
hgLogin: gate email-link sign-in and change-email behind login.emailLink (default off), refs #37929

Also: GitHub/OIDC token-format and robustness fixes, signed pending-identity to close
an account-takeover hole in the OAuth account chooser, account chooser for the email-link
flow, idx-based chooser to avoid a utf8/latin1 collation error on non-ASCII usernames, and
login/signup page UI polish (consistent buttons, fonts, cache-busted stylesheet, forgot
links, wording). refs #37984

diff --git src/hg/htdocs/style/userAccounts.css src/hg/htdocs/style/userAccounts.css
index 605cd48009e..a86f9db3747 100644
--- src/hg/htdocs/style/userAccounts.css
+++ src/hg/htdocs/style/userAccounts.css
@@ -1,112 +1,153 @@
 /* Styles for the login, signup, etc pages */
 
 body.accountScreen {background-color: #fffee8;}
 
+/* Use the same sans-serif font as the rest of the site (the page would otherwise fall back
+ * to the browser default, Times New Roman). */
+body {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}
+
 .formBox a {text-decoration: none}
 
 .formBox a:hover {text-decoration: underline;}
 
 .centeredContainer {margin: 0 auto;}
 
 .formBox {
     width: 400px;
     border: 2px solid #eed5b7;
     margin-top: 2.5em;
     padding: 0 30px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     background-color: #fff9d2;
 }
 
+/* The signup and login pages have more content (form + social buttons), so give them a
+ * little more room than the default 400px formBox. */
+#signUpBox, #loginBox {width: 480px;}
+
 .formBox input {font-size: 1.04em;}
 
 .formBox label {display: block; margin-top: 10px;}
 
 .formBox label.radioLabel {display: inline; margin: 0;}
 
 .formControls {
 	margin: 1em 0;
 }
 
+/* The form submit buttons ("Login", "Sign Up", ...) and the "Cancel" link share one
+ * consistent button style, so Cancel looks like the other buttons rather than a plain link. */
+input.largeButton,
+a.cancelButton {
+    display: inline-block;
+    padding: 4px 8px;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1.2;
+    border: 1px solid #999;
+    border-radius: 3px;
+    background: #f0f0f0;
+    color: #222 !important;
+    text-decoration: none !important;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+input.largeButton:hover,
+a.cancelButton:hover {
+    background: #e6e6e6;
+    border-color: #666;
+}
+
+/* Small "Forgot username / password" links under the login form fields. */
+a.forgotLink {
+    display: block;
+    margin-top: 3px;
+    font-size: 0.8em;
+    text-align: left;
+}
+
 #helpBox {
     margin-top: 20px;
     padding: 20px 0 10px 0; 
     border-top: 1px solid #eed5b7;
 }
 
 label small {
     font-style: italic;
     font-size: 0.9em;
 }
 
 .topBarContainer { /* only needed for login screens */
     padding: 6px 0;    
 }
 
 .highlightBox { /* combine with classes error, alert, or highlight */
 	border: 2px solid;
     padding: 10px;
 }
 
 .error { /* for use with highlightBox, when used for error msgs */
     border-color: #f00;
     background-color: #ffeded;
     color: #f00;
 }
 
 .confirmationTxt {
     font-size: 1.2em;
     font-weight: normal;
 }
 
 .error {color: #bb2525;}
 label.error {
     margin: 0;
     background-color: #FFF9D2;
     padding: 2px 5px;
     width: 321px;
 }
 
 input.error {
     border: 1px solid #bb2525;
     -moz-box-shadow:    inset 0 1px 1px #b0b0b0;
     -webkit-box-shadow: inset 0 1px 1px #b0b0b0;
     box-shadow:         inset 0 1px 1px #b0b0b0;
     padding: 3px 2px;
 }
 
 /* Social login (Google/ORCID) buttons and the "or" divider. */
 .socialLogin {margin: 0.5em 0;}
 
 .orDivider {
     text-align: center;
     border-top: 1px solid #eed5b7;
     line-height: 0.1em;
     margin: 1.2em 0;
 }
 
 .orDivider span {
     background: #fff9d2;
     padding: 0 10px;
 }
 
 a.socialButton {
     display: block;
     box-sizing: border-box;
     width: 100%;
     margin: 8px 0;
     padding: 9px 12px;
     text-align: center;
     font-weight: 700;
     color: #222 !important;
     background: #e0e0e0;
     border: 1px solid #999;
     border-radius: 3px;
     text-decoration: none !important;
 }
 
 a.socialButton:hover {
     background: #d5d5d5;
     border-color: #666;
 }
\ No newline at end of file