/*
 * Sign-in page — Figma "Connexion" (4050:9) and "Mot de passe oublié" (4725:20836).
 *
 * The decor is a flat colour plus the two blurred circle groups exported from Figma
 * (assets/images/decor/): sharper, lighter and resizable where a flattened raster would not be.
 * The card stays centred in the viewport whatever its size, as the development annotation asks.
 */

.mo-login {
    position: relative;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--mo-spacing-md) var(--mo-margin-body-lr);
    /* Bound to no Figma variable: the colour appears on this page only. */
    background-color: #fbcca4;
}

.mo-login__decor {
    position: absolute;
    max-width: none;
    pointer-events: none;
}

.mo-login__decor--large {
    top: -40vw;
    left: -30vw;
    width: 100vw;
}

.mo-login__decor--small {
    right: -15vw;
    bottom: -35vw;
    width: 66vw;
}

.mo-login__card {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 480px;
    flex-direction: column;
    align-items: center;
    gap: var(--mo-spacing-sm);
    padding: var(--mo-spacing-md) var(--mo-spacing-xl);
    border-radius: var(--mo-radius-lg);
    /* The "glass" effect of the maquette: the neutral surface at 20% over the decor. */
    background-color: rgb(243 243 243 / 20%);
    backdrop-filter: blur(12px);
}

.mo-login__logo {
    height: 150px;
    width: auto;
}

.mo-login__title {
    margin: 0;
    color: var(--mo-text-heading);
    font-size: var(--mo-font-size-h1);
    font-weight: var(--mo-font-weight-bold);
    line-height: var(--mo-line-height-h1);
    text-align: center;
}

.mo-login__form {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: var(--mo-spacing-sm);
}

.mo-login__field {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 320px;
    align-items: center;
}

.mo-login__input {
    width: 100%;
    height: 52px;
    padding: 14px 20px;
    border: var(--mo-border-width-xs) solid var(--mo-border-default-medium);
    border-radius: var(--mo-radius-md);
    background-color: var(--mo-surface-default-white);
    color: var(--mo-text-default-dark);
    font-family: inherit;
    font-size: var(--mo-font-size-body-md);
    font-weight: var(--mo-font-weight-medium);
    line-height: var(--mo-line-height-body-md);
}

.mo-login__input::placeholder {
    color: var(--mo-text-placeholder);
}

/*
 * The ring of base/reset.css was framing the field in blue as soon as it was clicked — a text
 * field matches `:focus-visible` however it took focus, so narrowing the selector would not have
 * removed it.
 */
.mo-login__input:focus {
    outline: none;
}

.mo-login__field--password .mo-login__input {
    padding-right: calc(20px + var(--mo-scale-300));
}

.mo-login__reveal {
    position: absolute;
    right: 20px;
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mo-icon-default-dark);
    cursor: pointer;
}

.mo-login__reveal svg {
    width: var(--mo-scale-200);
    height: var(--mo-scale-200);
}

.mo-login__remember {
    display: flex;
    width: 100%;
    max-width: 320px;
}

.mo-login__forgotten {
    color: var(--mo-text-placeholder);
    font-size: var(--mo-font-size-body-sm);
    line-height: var(--mo-line-height-body-sm);
    text-decoration: underline;
}

.mo-login__submit {
    width: 100%;
    max-width: 320px;
    justify-content: center;
}

.mo-login__error {
    width: 100%;
    max-width: 320px;
    margin: 0;
    padding: var(--mo-spacing-xs) var(--mo-spacing-sm);
    border: var(--mo-border-width-xs) solid var(--mo-border-error);
    border-radius: var(--mo-radius-md);
    background-color: var(--mo-error-50);
    color: var(--mo-error-600);
    font-size: var(--mo-font-size-body-sm);
    line-height: var(--mo-line-height-body-sm);
}

/*
 * Counterpart of the error box, for the one message the sign-in page ever congratulates on: the
 * password just set from a link.
 */
.mo-login__success {
    width: 100%;
    max-width: 320px;
    margin: 0;
    padding: var(--mo-spacing-xs) var(--mo-spacing-sm);
    border: var(--mo-border-width-xs) solid var(--mo-border-success);
    border-radius: var(--mo-radius-md);
    background-color: var(--mo-success-50);
    color: var(--mo-success-600);
    font-size: var(--mo-font-size-body-sm);
    line-height: var(--mo-line-height-body-sm);
}

/* Password policy, under the two fields of the "choose my password" screen. */
.mo-login__hint {
    width: 100%;
    max-width: 320px;
    margin: 0;
    color: var(--mo-text-placeholder);
    font-size: var(--mo-font-size-body-sm);
    line-height: var(--mo-line-height-body-sm);
}

/* ---------------------------------------------------------------- forgotten password */

.mo-login__notice {
    margin: 0;
    color: var(--mo-text-body);
    font-size: var(--mo-font-size-body-md);
    line-height: var(--mo-line-height-body-md);
    text-align: center;
}