/* Errors and confirmations on the account pages (sign-in, password change and reset): at the top of the form, in a
   box that cannot be mistaken for the small print. */
.sign-in-alert { margin: 12px 0 16px; padding: 12px 14px; border: 1px solid #e3a6a6; border-radius: 6px; background: #fdecec; color: #5c1410; font: 15px/1.45 "Fira Sans", Arial, Helvetica, sans-serif; }
.sign-in-alert strong { color: #b42318; }
.sign-in-alert ul { margin: 4px 0 0; padding-left: 18px; }
.sign-in-confirm { margin: 12px 0 16px; padding: 12px 14px; border: 1px solid #9fd3b4; border-radius: 6px; background: #e9f7ee; color: #12422a; font: 15px/1.45 "Fira Sans", Arial, Helvetica, sans-serif; }
.account-facts { margin: 4px 0 18px; }
.account-facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid #e4e8ee; font-size: 15px; }
.account-facts dt { color: #5b6b7c; }
.account-facts dd { margin: 0; overflow-wrap: anywhere; color: #10233a; }
.account-links { margin: 0; padding: 0; list-style: none; }
.account-links a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 4px; border-bottom: 1px solid #e4e8ee; color: var(--navy, #294b73); font-size: 15px; text-decoration: none; }
.account-links a:hover, .account-links a:focus-visible { background: #eef3f8; }

/* Sign-in form: the password's Show button, Keep me signed in, the lock on the button and Forgot your password. */
.sign-in-back, .sign-in-lead, .sign-in-public { display: none; }
.sign-in-password { position: relative; }
.utility-page .preview-login .sign-in-password input { padding-right: 64px; }
.utility-page .preview-login .sign-in-show { position: absolute; top: 0; right: 0; display: block; width: auto; min-height: 44px; margin: 0; padding: 0 14px; border: 0; background: none; color: var(--navy, #294b73); font: 600 13px "Fira Sans", Arial, Helvetica, sans-serif; cursor: pointer; }
.utility-page .preview-login .sign-in-show[hidden] { display: none; }
.utility-page .preview-login .sign-in-remember { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 12px 0 0; font-size: 14px; cursor: pointer; }
.utility-page .preview-login .sign-in-remember input { display: block; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: #1462d1; }
.sign-in-submit { display: flex !important; align-items: center; justify-content: center; gap: 8px; }
.sign-in-submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sign-in-forgot { margin: 14px 0 0; text-align: center; font-size: 14px; }
.sign-in-forgot a { display: inline-flex; align-items: center; min-height: 44px; color: #1462d1; }

/* The interest form (accounts/signup/): the sign-in form's fields plus a text box, the optional marks, the consent box
   and the honeypot, which is off screen and out of the tab order. */
.sign-up-lead { margin: 4px 0 6px; font-size: 15px; }
.utility-page .interest-form textarea { display: block; width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #c7d5e2; border-radius: 4px; background: #eaf0f6; color: #526176; font: 13px/1.5 "Fira Sans", Arial, Helvetica, sans-serif; resize: vertical; }
.utility-page .interest-form [aria-invalid="true"] { border-color: #b42318; }
.interest-optional { color: #5b6b7c; font-weight: 400; }
.utility-page .preview-login .interest-consent { align-items: flex-start; line-height: 1.45; }
.utility-page .preview-login .interest-consent input { flex: none; margin-top: 1px; }
.interest-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.login-panel p a { color: #1462d1; }
.sign-up-signin { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #e4e8ee; font-size: 14px; }

/* Phones: Kieran's "Sign in" frame. The introduction and the preview labels give way to a back link and the form. */
@media (max-width: 759px) {
  body.login-page .login-layout.wrap { display: block; width: auto; max-width: none; margin: 0; padding: 4px 18px 24px; }
  body.login-page .login-introduction, body.login-page .preview-label, body.login-page .login-note { display: none; }
  body.login-page .sign-in-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 4px; color: #10233a; font-size: 14px; font-weight: 600; text-decoration: none; }
  body.login-page .sign-in-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  body.login-page .login-panel { padding: 0; border: 0; background: none; }
  body.login-page .login-panel h2 { margin: 6px 0 4px; font-size: 32px; color: #10233a; }
  body.login-page .sign-in-lead { display: block; margin: 0 0 6px; color: #3d5670; font-size: 15px; }
  body.login-page #login-preview-note { margin: 0; font-size: 14px; }
  body.login-page .preview-login label { margin: 18px 0 8px; color: #10233a; font-size: 14px; font-weight: 600; }
  body.login-page .preview-login input, body.login-page .interest-form textarea { min-height: 48px; border-color: #c7d5e2; border-radius: 8px; background: #fff; color: #10233a; font-size: 16px; }
  body.login-page .preview-login .sign-in-show { min-height: 48px; }
  body.login-page .preview-login .sign-in-remember { font-weight: 400; }
  body.login-page .preview-login .sign-in-remember input { width: 22px; height: 22px; min-height: 0; }
  body.login-page .preview-login .sign-in-submit { min-height: 50px; margin-top: 16px; border: 0; border-radius: 10px; background: #1462d1; color: #fff; font-size: 16px; font-weight: 600; }
  body.login-page .sign-in-public { display: block; margin: 24px 0 0; padding: 12px 14px; border-radius: 10px; background: #eef3f8; color: #3d5670; font-size: 14px; }
  body.login-page .site-footer .footer-inner { justify-content: center; }
}