/*
 * The pages somebody sees before they are signed in: signing in, the code of the second step,
 * asking for a link, choosing a password, a link that no longer works, creating an account.
 *
 * One family. They used to be three: the sign-in page with the logo at its full 420 pixels over a
 * panel of 406, wider than the panel and wider than a phone; the framework's own pages for a
 * password link, with the same logo squeezed into a circle of 50 pixels beside the name of the
 * site; and the page "This could not be saved" for a link that had expired. Every one of them
 * is now a column with the logo, one card, and a quiet line under it where there is one.
 *
 * Colours and the card are the ones the stopping screens use (status-page.css), so a refusal here
 * is the same red and the same card as a refusal anywhere.
 */
.account-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    box-sizing: border-box;
}

/* The column every account page is laid out in. The logo, the card and the line under it share
   its width, so they line up whatever the page holds. */
.account-column {
    width: 100%;
    max-width: 416px;
}

/* The logo of the account pages: this one rule, and no other rule anywhere sizes it. The picture
   itself comes from .s-site-logo-img, light or dark with the theme. It is 232 pixels wide, half
   the screen on a phone and never less than 168, keeps its shape, and never grows past the
   column: so never past the card under it or the screen around it. */
.account-logo {
    display: block;
    width: clamp(168px, 50vw, 232px);
    max-width: 100%;
    height: auto;
    margin: 0 auto 24px;
}

.account-card {
    background: var(--s-card-bg);
    border: 1px solid var(--s-card-border);
    border-radius: 12px;
    box-shadow: var(--s-card-shadow);
    padding: 32px;
}

.account-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--s-card-title);
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.account-lead,
.account-next {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--bs-body-color);
    margin: 0 0 20px;
    overflow-wrap: anywhere;
}

.account-next {
    margin-top: -8px;
}

.account-card form {
    margin: 20px 0 0;
}

/* The buttons of a form follow its last field at the distance the fields keep from each other. */
.account-card form .account-actions {
    margin-top: 24px;
}

.account-card form .account-field:last-of-type {
    margin-bottom: 0;
}

.account-field {
    margin-bottom: 16px;
}

.account-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
}

.account-field .form-control {
    width: 100%;
    min-height: 42px;
}

.account-field .form-control.is-invalid {
    border-color: var(--status-bad);
}

/* What is wrong with one field, in words, directly under it. */
.account-field-error {
    margin-top: 6px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--status-bad);
}

.account-field-hint {
    margin-top: 6px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--bs-secondary-color);
}

/* What the server said about the whole form, or what a link came back with: in the card, where
   the person is looking, and not in a corner of the screen that scrolls away. */
.account-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 0 6px 6px 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.account-message > .fa {
    margin-top: 3px;
}

.account-message.is-bad {
    border-left: 3px solid var(--status-bad);
    background: var(--status-bad-soft);
}

.account-message.is-bad > .fa {
    color: var(--status-bad);
}

.account-message.is-info {
    border-left: 3px solid var(--status-info);
    background: var(--status-info-soft);
}

.account-message.is-info > .fa {
    color: var(--status-info);
}

.account-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.account-actions .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.account-link {
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.account-link:hover,
.account-link:focus-visible {
    color: var(--s-card-title);
}

/* A button that reads as a link: the way back from the second step. */
button.account-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* The line under the card: how somebody who is new gets in. Quiet, and as wide as the card. */
.account-note {
    margin: 20px 4px 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--bs-secondary-color);
    text-align: center;
    overflow-wrap: anywhere;
}

/* The badge of a page that only says something: a link that no longer works, a mail on its way. */
.account-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.account-badge.is-warn {
    background: var(--status-warn-soft);
    color: var(--status-warn);
}

.account-badge.is-ok {
    background: var(--status-ok-soft);
    color: var(--status-ok);
}

.account-badge.is-info {
    background: var(--status-info-soft);
    color: var(--status-info);
}

/* The rules a password has to meet, shown before anything is typed. Each turns from a ring into
   a tick when the password has it. */
.account-rules {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 6px;
    background: var(--bs-tertiary-bg);
    font-size: 0.875rem;
    line-height: 1.5;
}

.account-rules-title {
    margin: 0 0 6px;
    font-weight: 500;
}

.account-rules ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.account-rules li {
    display: flex;
    gap: 8px;
    align-items: baseline;
    color: var(--bs-secondary-color);
}

.account-rules li > .fa {
    width: 14px;
    flex: none;
    text-align: center;
    font-size: 0.75rem;
}

.account-rules li.is-met {
    color: var(--bs-body-color);
}

.account-rules li.is-met > .fa {
    color: var(--status-ok);
}

.account-rules.is-missing li:not(.is-met) {
    color: var(--status-bad);
}

/* "or" between the form and the Microsoft button. */
.account-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.account-divider::before,
.account-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--bs-border-color);
}

/* The Microsoft button is the quiet second way in beside the form, and the only button where
   Microsoft is the only way in. It takes its colours from the theme, so it reads in dark too. */
.account-microsoft {
    width: 100%;
    min-height: 42px;
    color: var(--bs-body-color);
    background-color: transparent;
    border: 1px solid var(--bs-border-color);
}

.account-microsoft:hover,
.account-microsoft:focus-visible {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-secondary-color);
}

/* The code of the second step: six digits, large enough to check against the mail. */
.account-code {
    font-size: 1.375rem;
    letter-spacing: 0.3em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* The framework's form inside the card of "Create an account": its fields under their labels,
   as wide as the card, like every other field here. */
.account-card .s-PropertyGrid .field {
    display: block;
    margin-bottom: 16px;
    padding: 0;
}

.account-card .s-PropertyGrid .field > .caption {
    display: block;
    float: none;
    width: auto;
    text-align: left;
    font-weight: 500;
    margin: 0 0 6px;
    padding: 0;
}

/* Every field of this form has to be filled in, so no field is marked as the one that has to. */
.account-card .s-PropertyGrid .field > .caption sup {
    display: none;
}

.account-card .s-PropertyGrid .field > .editor {
    width: 100%;
    min-height: 42px;
}

@media (max-width: 575px) {
    .account-page {
        justify-content: flex-start;
        padding: 24px 16px;
    }

    .account-card {
        padding: 22px;
    }
}