/* ===========================================
   AUTHENTICATION
   Sign-in pages, including the second factor
   for external users.
   =========================================== */

/* ===========================================
   SIGN-IN CODE ENTRY
   =========================================== */

/* One field rather than six boxes. Six need JavaScript to move the caret
   between them, defeat paste, and read poorly to a screen reader, which
   announces six unlabelled inputs. The spacing below gives the same sense of
   discrete digits without any of that. */
.code-input {
    font-size: 1.75rem;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.5rem;
    text-align: center;
    padding: 0.75rem 1rem;
    /* The tracking adds a trailing gap after the last digit, which throws the
       centring out. Half of it back as padding restores the balance. */
    text-indent: 0.5rem;
}

.code-input::placeholder {
    letter-spacing: 0.5rem;
    opacity: 0.35;
}

/* The address the code went to, shown so a typo in the email field is obvious
   before the user starts hunting through an inbox that will never receive it. */
.code-destination {
    word-break: break-all;
}

.code-resend-form {
    display: inline;
}

/* ===========================================
   SUBMIT PROGRESS
   Used by form-submit-progress.js
   =========================================== */

.submit-progress-spinner {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    vertical-align: middle;
}