/* ---------------------------------------------------------------------------------------------
   One sign-in box for the whole site, plus the confirm-your-email strip.

   THE CARD ITSELF IS NOT STYLED HERE. se-auth-v1.js builds its markup with the same class names as
   the header's old login modal (.se-login, .se-login-card, .se-login-form, .se-login-go and the
   rest), so every rule in se-chrome-vNN.css already applies to it and the box David signed off is
   unchanged. What follows is only the parts that modal did not have: the email-first step, the
   honeypot, and the banner.

   Written to a NEW filename if it changes. The version in the filename IS the cache busting.
   --------------------------------------------------------------------------------------------- */

/* The reason a visitor is being asked, when there is one: "Sign in to open this course". Sits
   between the heading and the sub-line, quieter than either. */
.se-chrome.se-login .se-auth-reason {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: #f6f2ea;
    border-radius: 9px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #6b6357;
}

/* "you@example.com — not you?" on the second step. The address is the answer to the first question,
   so it stays visible and editable; this is only the way back if they mistyped it. */
.se-chrome.se-login .se-auth-back {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #615c53;
    text-align: left;
}

.se-chrome.se-login .se-auth-back button {
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 700;
    color: #c46a26;
    text-decoration: underline;
    cursor: pointer;
}

/* A honeypot. NOT display:none and NOT hidden: several password managers and some browsers skip a
   display:none field, and a bot that reads the computed style skips it too. Off-canvas is visible to
   a naive script and to nobody else. tabindex=-1 and aria-hidden keep it out of a keyboard and
   screen-reader path. */
.se-chrome.se-login .se-auth-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* The small print under the sign-up button. */
.se-chrome.se-login .se-auth-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #7c7568;
    text-align: left;
}

/* The spinner state on the button is the chrome's own .se-login-go[disabled]; nothing to add. */

/* ---------------------------------------------------------------------------------------------
   The confirm-your-email strip.

   Under the header, on every page, for a signed-in member who has not confirmed. Quiet on purpose:
   it is a nudge with a reason attached, not a wall, and the member can dismiss it for the session.
   --------------------------------------------------------------------------------------------- */

.se-verify {
    background: #fdf6e9;
    border-bottom: 1px solid #f0e4cc;
    font-family: 'Mulish', 'Assistant', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    color: #6b5a33;
}

.se-verify[hidden] {
    display: none;
}

.se-verify-in {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Matches the header's own inner box so the text starts on the same x as the logo above it. */
    width: min(1140px, calc(100% - 48px));
    margin: 0 auto;
    padding: 10px 0;
}

.se-verify-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: #b8892c;
}

.se-verify-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
}

.se-verify-text strong {
    font-weight: 700;
    /* An email address is not a word: let it break rather than push the buttons off a phone. */
    word-break: break-word;
}

.se-verify-send {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 14px;
    background: #ffffff;
    border: 1px solid #e0cfa8;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #8a6a1f;
    cursor: pointer;
}

.se-verify-send:hover:not([disabled]) {
    background: #fffdf8;
    border-color: #c9ae74;
}

.se-verify-send[disabled] {
    opacity: 0.6;
    cursor: default;
}

.se-verify-x {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    color: #a89468;
    cursor: pointer;
}

.se-verify-x svg {
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
}

.se-verify-x:hover {
    color: #6b5a33;
}

/* On a phone the two buttons drop under the sentence rather than squeezing it to two words a line. */
@media (max-width: 600px) {
    .se-verify-in {
        flex-wrap: wrap;
        width: calc(100% - 32px);
        padding: 10px 0 12px;
    }

    .se-verify-text {
        flex: 1 1 100%;
        order: 2;
    }

    .se-verify-icon {
        order: 1;
    }

    .se-verify-x {
        order: 1;
        margin-left: auto;
    }

    .se-verify-send {
        order: 3;
        margin-left: 32px;
    }
}

/* The outcome of clicking the link in the email. Same shape as the strip above; green when it
   worked, amber when the link was stale. */
.se-confirmed {
    background: #eef7ee;
    border-bottom: 1px solid #d3e8d3;
    color: #2f5b33;
}

.se-confirmed.se-confirmed-warn {
    background: #fdf6e9;
    border-bottom-color: #f0e4cc;
    color: #6b5a33;
}

/* Where a "please log in" sentence used to hold a link to wp-login. Looks like the link it replaced,
   because in the middle of a sentence a button should not look like a button. */
.se-inline-login {
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: #c46a26;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------------------------
   "Save your details for next time" — the account offered on a thank-you screen.

   Mounted inside the donation and book panels, which are `don-*` styled, and inside anything else
   that calls SE_Auth.accountOffer(). It therefore brings its own box rather than inheriting one, so
   it looks the same in all of them, and uses the same tints as the rest of this file.
   --------------------------------------------------------------------------------------------- */

.se-acct-offer {
    margin: 18px 0 0;
    padding: 16px 18px;
    background: #fdf6e9;
    border: 1px solid #f0e4cc;
    border-radius: 12px;
    font-family: 'Mulish', 'Assistant', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    color: #33312e;
    text-align: left;
}

.se-acct-offer.is-done {
    background: #eef7ee;
    border-color: #d3e8d3;
}

.se-acct-offer.is-known {
    background: #f6f2ea;
    border-color: #e3ddd0;
}

.se-acct-offer h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    color: #33312e;
}

.se-acct-offer p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #615c53;
}

.se-acct-offer .se-acct-form {
    margin-top: 12px;
}

.se-acct-offer label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #33312e;
}

.se-acct-offer input[type="password"] {
    width: 100%;
    min-height: 46px;
    margin: 0 0 10px;
    padding: 0 13px;
    background: #ffffff;
    border: 1px solid #e3e0d8;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15.5px;
    color: #33312e;
}

.se-acct-offer input[type="password"]:focus {
    outline: 2px solid #c46a26;
    outline-offset: 1px;
}

/* The username input is present only so a password manager has somewhere to put the address it is
   about to save alongside the new password. It is hidden, and `hidden` alone is not enough once a
   stylesheet sets display on inputs. */
.se-acct-offer input[name="username"] {
    display: none !important;
}

.se-acct-offer .se-acct-go {
    width: 100%;
    min-height: 46px;
    padding: 0 18px;
    background: #c46a26;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    cursor: pointer;
}

.se-acct-offer .se-acct-go:hover:not([disabled]) {
    background: #b25f21;
}

.se-acct-offer .se-acct-go[disabled] {
    opacity: 0.65;
    cursor: default;
}

.se-acct-offer .se-acct-err {
    margin: 10px 0 0;
    padding: 9px 12px;
    background: #fdeceb;
    border-radius: 9px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #8f2f24;
}

.se-acct-offer .se-acct-err[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------------------------
   "Is that address right?" - the step that stands between a mistyped address and a second account.

   Deliberately not styled as an error. Nothing has gone wrong yet: we are asking a question, and
   the answer "that address is right" has to be as easy to give as the correction. So the correction
   is the primary button (the chrome's own .se-login-go) and carrying on is a quiet one under it.
   --------------------------------------------------------------------------------------------- */
.se-chrome.se-login .se-auth-typo {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #615c53;
    text-align: left;
    word-break: break-word;
}

.se-chrome.se-login .se-auth-typo b {
    color: #3d3934;
    font-weight: 800;
}

.se-chrome.se-login .se-login-alt {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    padding: 12px 14px;
    background: none;
    border: 1.5px solid #e2dbcf;
    border-radius: 999px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: #615c53;
    cursor: pointer;
}

.se-chrome.se-login .se-login-alt:hover {
    border-color: #c9c0b1;
    color: #3d3934;
}

/* A long email address must be allowed to wrap inside either button rather than run off the pill. */
.se-chrome.se-login .se-login-alt,
.se-chrome.se-login .se-login-go {
    white-space: normal;
    word-break: break-word;
}

/* ---------------------------------------------------------------------------------------------
   The password rule, stated before anybody types and ticked off as they meet it.

   The same treatment as the reset page, on purpose: a neutral dot to start, because nothing is
   wrong yet, and a tick in the same green when the rule is met. The colours are the reset page's,
   so a member who has seen one recognises the other.
   --------------------------------------------------------------------------------------------- */
.se-chrome.se-login .se-auth-rules,
.se-acct-offer .se-auth-rules {
    list-style: none;
    padding: 0;
    margin: 8px 0 4px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #615c53;
    text-align: left;
}

.se-chrome.se-login .se-auth-rules li.is-ok,
.se-acct-offer .se-auth-rules li.is-ok {
    color: #3f6b39;
}

.se-chrome.se-login .se-auth-rules li.is-todo,
.se-acct-offer .se-auth-rules li.is-todo {
    color: #a4623a;
}

.se-chrome.se-login .se-auth-rules [data-mark],
.se-acct-offer .se-auth-rules [data-mark] {
    display: inline-block;
    width: 14px;
    font-weight: 800;
}