/* Sign-in method chooser.

   The member picks how they want to sign in, and only that panel is shown. Before this the
   password form and the code form sat on top of each other, so asking for a code left the
   password form still on screen as if it were the thing to do next.

   Panels are hidden by CSS that only applies once the script has marked the page, so with
   JavaScript unavailable every panel stays visible and the page still works. */

.js-login [data-login-panel] {
    display: none;
}

.js-login [data-login-panel].is-open {
    display: block;
}

/* ---------------------------------------------------------------- the chooser */

.login-options {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 40px;
}

/* Each option takes half the row on a wide screen and the full width once there is no longer
   room for two, so no media query is needed. The basis is deliberately small: the panel caps at
   650px with 100px of padding either side, so there are only about 450px to share. */
.login-option {
    flex: 1 1 190px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 6px;
    padding: 28px 26px;
}

.login-option-label {
    margin: 0 0 20px;
    font-weight: 600;
}

/* Pushes the buttons onto a shared baseline when one label wraps and the other does not. */
.login-option .login-option-action {
    margin-top: auto;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 1.35;
}

/* ------------------------------------------------------------- panel back link */

.login-panel-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.login-back {
    background: none;
    border: none;
    padding: 6px 0;
    font: inherit;
    color: #7a5600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.login-back:hover,
.login-back:focus-visible {
    color: #b37e00;
}

/* The theme removes focus rings in places; keyboard users still need to see where they are. */
.login-back:focus-visible,
.login-option .button:focus-visible {
    outline: 2px solid #b37e00;
    outline-offset: 3px;
}

/* --------------------------------------------------------------------- messages */

.login-message {
    margin-top: 20px;
}

.login-message--ok {
    color: #0d6259;
}

.login-message--error {
    color: #95212d;
}

/* ------------------------------------------------------------------ small screens */

@media (max-width: 575.98px) {
    .login-options {
        gap: 16px;
        margin-top: 28px;
    }

    .login-option {
        padding: 22px 20px;
    }

    .login-option-label {
        margin-bottom: 14px;
    }
}