/* The narrower width comes from .page-center--narrow (base.css); only the
   extra room under the error is this page's own. */
.page-center > .error {
    margin: 0 0 1rem;
}

/* The password label and the "Forgot your password?" link share a row. */
.password-row {
    display: flex;
    align-items: baseline;
}

/* "Forgot your password?" - small and quiet, at the row's right end. */
.password-row a {
    color: var(--text-muted);
    font-size: var(--font-xs);
    margin-left: auto;
}

.password-row a:hover {
    color: var(--text-darker);
}

.form .input + .password-row {
    margin-top: 0.5rem;
}

/* Remember me on the right, under "Forgot your password?" - the row's
   items pushed to its end. */
.checkbox-field {
    justify-content: flex-end;
}

/* On a phone (the sidebar's 50rem) the card at the top, not in the middle
   of the screen - the keyboard opening below it would cover a centred one.
   .page-center is a column, so justify-content is up and down. */
@media (max-width: 50rem) {
    .page-center {
        justify-content: flex-start;
        margin-top: 2rem;
    }
}