/* 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;
}

/* "This is the new site" (OLD_SITE_DOMAIN) - a box of its own above the
   login card, read before logging in. */
.old-site-notice {
    /* As wide as the card under it (.page-center--narrow's form). */
    width: 100%;
    max-width: var(--width-narrow);
    /* The space between two cards. */
    margin: 0 0 var(--card-dist);
    /* The card's look, with less padding - it's a few lines of text. */
    padding: 0.75rem 1rem;
    background: var(--gray-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-big);
    /* A line down its left edge, like a card waiting for you
       (details.css's .card--attention - not loaded on this page); yellow,
       the warning colour, as it's a heads-up rather than an error. */
    border-left: 3px solid var(--yellow-pastel);
    font-size: var(--font-sm);
}

/* Its link like the site's other links in text, not the browser's blue. */
.old-site-notice a {
    color: var(--red-pastel);
}

/* 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;
    }
}