/* The account forms — login, create account, and the password ones.
 *
 * Layered over form.simple in style_2024.css rather than replacing it: that
 * one dresses seventeen forms, most of them staff tools, and only these few
 * want the treatment below. The markup is untouched, so what is here is a
 * re-reading of the same column classes the templates already carry.
 *
 * The look is the rest of the 2024 site: a white card on a soft border, one
 * column with the label over its field, and the seagreen pill a plugin page
 * buys with.
 */

/* ------------------------------------------------------------- the card */

#text.account-form {
    max-width: 480px;
    margin: 48px auto 72px;
    padding: 36px 34px 34px;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    background: white;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.07);
    box-sizing: border-box;
}

@media (max-width: 560px) {
    #text.account-form {
        margin: 24px 10px 48px;
        padding: 26px 20px 24px;
    }
}

#text.account-form h2 {
    margin: 0 0 4px;
    font-size: 27px;
    line-height: 1.15;
    font-variation-settings: "wght" 800, "opsz" 36;
}

/* a line under the heading saying what the form is for */
#text.account-form .account-form-note {
    margin: 0 0 22px;
    color: #777;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}

#text.account-form form.simple {
    margin: 0 !important;
    max-width: none;
}

/* ------------------------------------------------------------- the grid */

/* Two columns, where the original had three: a gutter the width of a
   checkbox, and everything else. Labels and fields span both, so each label
   sits over its own field at the full width of the card rather than beside
   it in a narrower lane. */
#text.account-form form.simple .grid {
    grid-template-columns: 30px minmax(0, 1fr);
    grid-gap: 0;
}

#text.account-form form.simple .grid .column1-label {
    grid-column: 1 / -1;
    margin: 14px 0 0;
    text-align: left;
}

#text.account-form form.simple .grid .text-field {
    grid-column: 1 / -1;
}

/* The tick or cross validate-form.js draws is lifted onto the right of the
   field just above it rather than given a column of its own, which would
   have taken that width off every input. The negative margin cancels its own
   height, so the row it sits in adds nothing to the layout. */
#text.account-form form.simple .grid .valid-indicator {
    position: relative;
    top: -34px;
    grid-column: 1 / -1;
    justify-self: end;
    width: 20px;
    height: 20px;
    margin: 0 13px -20px 0;
    background-size: 20px 20px;
    background-position: center;
    pointer-events: none;
}

/* the checkbox and the words beside it stay on one line */
/* A .column2 is the full width of the card, except the one right after a
   .column1 — that pair is a checkbox and the sentence beside it, and only
   then does the gutter earn its 30px. */
#text.account-form form.simple .grid .column2 {
    grid-column: 1 / -1;
    text-align: left;
}

#text.account-form form.simple .grid .column1 {
    grid-column: 1 / 2;
    margin: 0;
    text-align: left;
}

#text.account-form form.simple .grid .column1 + .column2 {
    grid-column: 2 / -1;
}

#text.account-form form.simple .grid .helptext,
#text.account-form form.simple .grid .errorlist {
    grid-column: 1 / -1;
    margin: 5px 0 0;
}

#text.account-form form.simple .grid .spacer {
    margin-bottom: 14px;
}

#text.account-form form.simple .grid hr {
    grid-column: 1 / -1;
    margin: 22px 0 4px;
    border-top: 1px solid #eee;
}

#text.account-form form.simple .grid p.explainer,
#text.account-form form.simple .grid .column2 p.explainer {
    grid-column: 1 / -1;
    max-width: none;
    margin: 6px 0 0 !important;
    padding: 0;
    color: #777;
    line-height: 1.45;
    text-align: left;
}

/* ---------------------------------------------------- an account at risk */

/* Deleting an account is not a thing to offer in the same green as buying a
   plugin, so the one form that does it says so in its colour. */
#text.account-form.account-form-danger form.simple button[type='submit'] {
    border-color: #b3261e;
    background: #b3261e;
}

/* Written out to the same depth as the .explainer rule above, which is also
   an explainer and would otherwise win on specificity and flatten the
   padding back to nothing. */
#text.account-form form.simple .grid p.explainer.account-form-warning,
#text.account-form form.simple .grid .column2 p.explainer.account-form-warning {
    margin: 18px 0 0 !important;
    padding: 13px 15px;
    border: 1px solid #f0d4d1;
    border-radius: 12px;
    background: #fdf5f4;
    color: #7a3a35 !important;
    font-variation-settings: "wght" 400, "ital" 0 !important;
}

#text.account-form .account-form-warning strong {
    font-variation-settings: "wght" 750, "ital" 0;
}

#text.account-form form.simple .grid .recaptcha,
#text.account-form form.simple .cf-turnstile {
    grid-column: 1 / -1;
    margin: 18px auto 0;
}

/* ---------------------------------------------------------- the writing */

/* Field labels as small caps over their field. Only the ones in the label
   column: a checkbox's label is a sentence beside it, not a heading over it,
   and shouting it would read as an instruction rather than a choice. */
#text.account-form form.simple .column1-label label {
    margin: 0 0 6px;
    padding: 0;
    color: #444;
    font-size: 13px;
    font-variation-settings: "wght" 700, "ital" 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#text.account-form form.simple .column2 label {
    margin: 0;
    padding: 0;
    color: #444;
    font-size: 14.5px;
    line-height: 1.45;
    font-variation-settings: "wght" 500, "ital" 0;
}

/* the checkbox and its sentence on one line, tops aligned */
#text.account-form form.simple .grid .column1 {
    align-self: start;
    padding-top: 1px;
}

#text.account-form form.simple .grid .column2 {
    align-self: start;
}

/* ----------------------------------------------------------- the fields */

#text.account-form form.simple input[type='text'],
#text.account-form form.simple input[type='password'],
#text.account-form form.simple input[type='email'] {
    max-height: none;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    background: #fcfcfc;
    font-size: 16px;
    line-height: 1.3;
    transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}

#text.account-form form.simple input[type='text']:hover,
#text.account-form form.simple input[type='password']:hover,
#text.account-form form.simple input[type='email']:hover {
    border-color: #c6c6c6;
}

/* the ring is drawn with a shadow rather than an outline, so it follows the
   corner radius */
#text.account-form form.simple input[type='text']:focus,
#text.account-form form.simple input[type='password']:focus,
#text.account-form form.simple input[type='email']:focus {
    outline: none;
    border-color: seagreen;
    background: white;
    box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.15);
}

#text.account-form form.simple input[type='checkbox'] {
    height: 20px;
    width: 20px;
    margin: 1px 0 0;
    border-radius: 5px;
    border-width: 1px;
    padding: 0;
}

#text.account-form form.simple input[type='checkbox']:checked:after {
    width: 24px;
    height: 24px;
    left: -1px;
    bottom: -1px;
    background-size: 24px 24px;
}

/* ----------------------------------------------------------- the button */

#text.account-form form.simple button[type='submit'] {
    width: 100%;
    height: auto;
    margin: 6px 0 0;
    padding: 13px 18px;
    border: 1px solid seagreen;
    border-radius: 100px;
    background: seagreen;
    font-size: 17px;
    font-variation-settings: "wght" 700, "ital" 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 1px 2px rgba(0, 0, 0, 0.18);
    transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
}

#text.account-form form.simple .grid button[type='submit'] {
    grid-column: 1 / -1;
}

#text.account-form form.simple button[type='submit']:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.16);
}

#text.account-form form.simple button[type='submit']:active {
    transform: none;
}

/* the quieter ways on from here, under the button */
#text.account-form form.simple .grid .button-align {
    grid-column: 1 / -1;
    width: auto;
    margin: 16px 0 0 !important;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
    line-height: 1.9;
    font-size: 14px;
}

#text.account-form form.simple .grid .button-align a {
    color: #666;
    text-decoration: none;
}

#text.account-form form.simple .grid .button-align a:hover {
    color: seagreen;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* a way on from a card with no form in it, such as a spent reset link */
#text.account-form .account-form-ways {
    margin-top: 6px;
    text-align: center;
    font-size: 15px;
}

#text.account-form .account-form-ways a {
    color: seagreen;
    font-variation-settings: "wght" 600, "ital" 0;
    text-decoration: none;
}

#text.account-form .account-form-ways a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    #text.account-form form.simple button[type='submit'],
    #text.account-form form.simple button[type='submit']:hover {
        transform: none;
        transition: none;
    }
}