/* The sign-in pages: sign in, the second step, first-time setup, backup codes,
   an invitation, and the pages for links that don't work. One card, centred. */
:root {
  --sf-ink: #1d2b3a;
  --sf-blue: #3f5f8a;
  --sf-blue-dark: #2f4a6e;
  --sf-paper: #f6f7f9;
  --sf-line: #d9dee5;
  --sf-edge: #6b7280;
}
.si-body { background: var(--sf-paper); color: var(--sf-ink); min-height: 100vh; }
.si-main { max-width: 28rem; margin: 0 auto; padding: 2.5rem 1rem 3rem; }
.si-brand { text-align: center; font-weight: 700; font-size: 1.25rem; letter-spacing: .01em; color: #012b3d; margin: 0 0 1.25rem; }
.si-card { background: #fff; border: 1px solid var(--sf-line); border-radius: .75rem; padding: 1.5rem; box-shadow: 0 .25rem .75rem rgba(1, 43, 61, .06); }
.si-card h1 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .35rem; }
.si-lead { color: #4b5a6b; margin-bottom: 1.25rem; overflow-wrap: anywhere; }
.si-or { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: #4b5a6b; font-size: .9rem; }
.si-or::before, .si-or::after { content: ""; flex: 1; border-top: 1px solid var(--sf-line); }
.si-heading-sm { font-size: .9rem; font-weight: 700; color: #4b5a6b; margin: 1.25rem 0 .25rem; }
.si-alt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.si-alt li + li { border-top: 1px solid #eef1f4; }
.si-alt a, .si-alt button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: .65rem 0; background: none; border: 0; text-align: left; color: var(--sf-blue-dark); font-weight: 600; text-decoration: none; }
.si-alt a::after, .si-alt button::after { content: "›"; font-size: 1.4rem; line-height: 1; color: #8a949f; }
.si-alt a:hover, .si-alt button:hover { text-decoration: underline; }
.si-alt a:focus-visible, .si-alt button:focus-visible { outline: 2px solid var(--sf-blue); outline-offset: 2px; }
.si-below { text-align: center; font-size: .9rem; color: #4b5a6b; margin: 1.25rem 0 0; }
.si-link-btn { --bs-btn-color: var(--sf-blue-dark); --bs-btn-hover-color: var(--sf-blue); padding: 0; vertical-align: baseline; font-size: inherit; }
.si-steps { list-style: none; display: flex; justify-content: center; gap: 1.25rem; padding: 0; margin: 0 0 1.25rem; font-size: .9rem; color: #4b5a6b; }
.si-steps li { display: flex; align-items: center; gap: .4rem; }
.si-step-no { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--sf-edge); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }
.si-steps .done { color: #185c33; }
.si-steps .done .si-step-no { background: #2e8b57; border-color: #2e8b57; color: #fff; }
.si-steps .current { color: var(--sf-ink); font-weight: 700; }
.si-steps .current .si-step-no { border-color: var(--sf-blue); color: var(--sf-blue-dark); }
.si-check { color: #2e8b57; font-size: 2.25rem; line-height: 1; margin: 0 0 .5rem; }
.si-main .form-control { border-color: var(--sf-edge); }
a { color: var(--sf-blue-dark); }
.btn-primary { --bs-btn-bg: var(--sf-blue); --bs-btn-border-color: var(--sf-blue); --bs-btn-hover-bg: var(--sf-blue-dark); --bs-btn-hover-border-color: var(--sf-blue-dark); --bs-btn-active-bg: var(--sf-blue-dark); --bs-btn-active-border-color: var(--sf-blue-dark); }
.btn-outline-primary { --bs-btn-color: var(--sf-blue-dark); --bs-btn-border-color: var(--sf-blue); --bs-btn-hover-bg: var(--sf-blue); --bs-btn-hover-border-color: var(--sf-blue); --bs-btn-active-bg: var(--sf-blue-dark); }
@media (max-width: 420px) { .si-steps { gap: .75rem; font-size: .85rem; } }
/* Confirming a new sign-in email (accounts/email_change.html). */
.si-facts { display: flex; flex-direction: column; gap: .7rem; margin: 0 0 1.25rem; font-size: .95rem; }
.si-facts dt { color: #4b5a6b; font-weight: 400; font-size: .85rem; }
.si-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.si-note { color: #4b5a6b; font-size: .9rem; margin: 1rem 0 0; }