/* ============================================================================
   PORTAL FORMS -- the .auth-form field system, shared by _LoginLayout and
   _PortalLayout. JJE 08/22/2026.

   These rules were written for the sign-up page and lived in Login.css, which
   only _LoginLayout links. Extending the same design to the membership
   application flow needed them in a file both layouts can link -- the same move
   portal-shell.css made for the tabbed frame, and for the same reason: two
   copies of a design drift, and the drift is invisible until somebody opens the
   two pages side by side.

   WHAT BELONGS HERE: the heading block, the field grid, labels, controls,
   hints, validation messages, the password checklist panel, the notice block
   and the exits. Anything a form needs on either layout.

   WHAT DOES NOT: #loginCard, #loginform, .welcome-text, .info-card, the pill
   buttons, the tab bar. Those are the landing page's own furniture and stay in
   Login.css and portal-shell.css. The root CLAUDE.md's warning about Login.css
   reaching the membership forms is exactly about that half of the file.

   No framework dependency on purpose. _LoginLayout loads Bootstrap 4 and
   _PortalLayout loads Bootstrap 3 (twice, two different builds), so plain
   flexbox is the only thing that behaves the same on both. Nothing here is
   written above .form-control's own specificity by more than one class, which
   is what lets a page override it locally if it has to.

   The palette variables come from portal-shell.css, which both layouts link
   BEFORE this file.
   ============================================================================ */

/* --- HEADING -------------------------------------------------------------- */
.auth-head {
    text-align: center;
    margin-bottom: 24px;
}

    .auth-head h1 {
        font-size: 26px;
        font-weight: 700;
        color: var(--coop-navy);
        margin: 0 0 8px;
    }

    .auth-head p {
        font-size: 14px;
        line-height: 1.5;
        color: #5b7898;
        margin: 0 auto;
        max-width: 460px;
    }

.auth-head + .auth-notice,
.auth-head + .auth-form {
    margin-top: 4px;
}

/* --- THE GRID -------------------------------------------------------------
   Plain flexbox with a column gap; the row gap is each field's bottom margin.
   row-gap has thinner support than gap's one-value form and this needs neither.

   TWO CLASSES, NOT ONE, and the split is load-bearing. .auth-form is how a page
   asks for the LOOK - labels, controls, hints, errors. .auth-grid is how it asks
   for this LAYOUT, and it only makes sense when the form's direct children are
   .auth-field elements.

   Found while converting the first membership page. Those forms are laid out with
   Bootstrap 3's float grid: the form's direct children are .row divs. Making such
   a form a flex container turns each .row into a flex item sized to its content
   rather than a full-width block, which quietly collapses a working two-column
   form. A membership view can now take .auth-form on its own, keep the grid it
   already has, and still get the fields and labels - which is what makes
   converting that flow one page at a time safe.

   Everything on the Online Banking tab carries both. */
.auth-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0 22px;
}

.auth-field {
    flex: 1 1 100%;
    min-width: 0;
    margin-bottom: 18px;
}

/* Paired fields share a line from 576px up; below that every field is full
   width, which is the right answer on a phone.

   576 rather than 768: tying it to 768 meant the pairing silently disappeared on
   any window narrower than that, INCLUDING a full-size window at 175% browser
   zoom, which reports a CSS viewport of about 750px. A member who zooms in to
   read the form is exactly the member who should not lose the layout. */
@media (min-width: 576px) {
    .auth-field.is-half {
        flex: 1 1 calc(50% - 11px);
    }

    .auth-field.is-third {
        flex: 1 1 calc(33.333% - 15px);
    }
}

/* --- SECTION HEADINGS -----------------------------------------------------
   A long form in one undifferentiated stack is what makes it feel long; named
   groups of four or five do not. The rule is drawn with ::after so the heading
   text sets its own width. */
.auth-section {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    margin: 2px 0 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--coop-blue);
}

    .auth-section::after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        margin-left: 12px;
        background: #e3ecf6;
    }

    .auth-section:not(:first-of-type) {
        margin-top: 8px;
    }

/* --- LABELS AND CONTROLS --------------------------------------------------- */
.auth-form label {
    display: block;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--coop-navy);
    margin-bottom: 6px;
}

.auth-form .req {
    color: #d64545;
    font-weight: 700;
}

.auth-form .form-control {
    /* NO width HERE. Both Bootstraps already give .form-control width:100%, so
       this rule only ever restated it - and restating it broke the sign-in form.
       A control inside a Bootstrap 4 .input-group is given flex:1 1 auto and
       width:1%, which is what lets the icon in front and the reveal button behind
       sit on the same line as the field. width:100% out of this file outranked
       that (two classes against one), the field claimed the full row, and both
       addons wrapped onto lines of their own - an icon in a box above the input
       and an eye in a box below it. Fixed 08/22/2026 after seeing it rendered.

       If a control ever genuinely needs a width, it goes on that page, not here. */
    height: 46px;
    padding: 10px 14px;
    font-size: 15px;
    color: #24334a;
    background-color: #ffffff;
    border: 1px solid #cfdded;
    border-radius: 10px;
    box-shadow: none;
}

    .auth-form textarea.form-control {
        height: auto;
        min-height: 92px;
    }

    .auth-form .form-control::-webkit-input-placeholder {
        color: #9fb2c6;
    }

    /* A field the browser has autofilled is painted by the browser, not by the
       page: Chrome and Edge lay their own pale blue over background-color and
       ignore it, so a saved username and password came back looking like two
       disabled fields on an otherwise white card. The colour cannot be set
       directly either - an inset shadow the full height of the control is the
       only thing that covers it, and -webkit-text-fill-color is what the text
       obeys. The four states are all listed because the paint is re-applied on
       hover, focus and again after the value is accepted. JJE 08/22/2026. */
    .auth-form .form-control:-webkit-autofill,
    .auth-form .form-control:-webkit-autofill:hover,
    .auth-form .form-control:-webkit-autofill:focus,
    .auth-form .form-control:-webkit-autofill:active {
        -webkit-box-shadow: inset 0 0 0 1000px #ffffff;
        box-shadow: inset 0 0 0 1000px #ffffff;
        -webkit-text-fill-color: #24334a;
        caret-color: #24334a;
    }

    .auth-form .form-control:focus {
        border-color: var(--coop-blue);
        box-shadow: none;
        /* Keyboard focus was invisible across this whole shell. :focus rather
           than :focus-visible -- IE=edge is still declared in both layout heads. */
        outline: 2px solid var(--coop-blue);
        outline-offset: 2px;
    }

    /* jquery.validate marks the field, not only the message under it. */
    .auth-form .form-control.input-validation-error,
    .auth-form .form-control.error {
        border-color: #e0a3a3;
        background-color: #fdf8f8;
    }

/* The same tint for a form carrying .validated-form rather than .auth-form -- see
   the note on the message rule below. Written as its own block, outside the
   .auth-form control rules above, because it must NOT inherit the rest of them:
   the whole point of .validated-form is that the control keeps its existing
   shape and only gains the error marking. Claude 08/22/2026. */
.validated-form .form-control.input-validation-error,
.validated-form .form-control.error {
    border-color: #e0a3a3;
    background-color: #fdf8f8;
}

    /* A read-only field is not disabled - it still takes focus and is copyable -
       but it must not look like somewhere to type. */
    .auth-form .form-control[readonly] {
        color: #55697f;
        background-color: #f4f7fa;
        cursor: default;
    }

    .auth-form .form-control[disabled] {
        color: #7d8fa4;
        background-color: #f0f3f7;
        cursor: not-allowed;
    }

/* The select drew the operating system's own control, which on Windows is a grey
   square button that matches nothing else on the page. */
.auth-form select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23185fa5' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* The date input keeps its native picker button - it is the control, not
   decoration - but it is nudged clear of the rounded corner. */
.auth-form input[type="date"]::-webkit-calendar-picker-indicator {
    margin-right: 2px;
    opacity: .6;
    cursor: pointer;
}

/* --- HINTS AND ERRORS ------------------------------------------------------ */
.auth-form .auth-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: #7d8fa4;
}

/* field-validation-error is the class MVC's unobtrusive validation swaps in;
   .error is jquery.validate's own. Both mean the same thing.

   .validated-form is the SECOND way in, and it exists because of the order this
   work happens in. The membership flow is being carried over to .auth-form one
   page at a time, and .auth-form restyles every label and control on the form it
   is put on -- which is a real change to weigh on an eighty-field wizard, and not
   one to make as a side effect of fixing an error message. A form that is not
   ready for the look can take .validated-form instead and get the error styling
   alone: the message and the tinted control, nothing else.

   It is additive, so a page converted later keeps working with both classes on it
   and the extra one can be dropped whenever the view is next touched.

   Claude 08/22/2026. */
.auth-form .field-validation-error,
.auth-form label.error,
.validated-form .field-validation-error,
.validated-form label.error {
    display: block;
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 600;
    color: #c0392b;
}

/* ValidationSummary renders an empty div with an empty list when there is
   nothing to say. As a flex item that is a blank row above the first field. */
.auth-form .validation-summary-valid {
    display: none;
}

.auth-form .validation-summary-errors {
    flex: 1 1 100%;
    margin-bottom: 20px;
    padding: 12px 16px;
    font-size: 14px;
    color: #a3312a;
    background-color: #fdeceb;
    border: 1px solid #f3c7c3;
    border-radius: 10px;
}

    .auth-form .validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }

/* --- THE PASSWORD CHECKLIST -----------------------------------------------
   A tinted panel under both password fields rather than six loose lines hanging
   off the left-hand one, and two columns while there is room - the six rules are
   otherwise the tallest thing on the page. */
.auth-form .auth-pw {
    padding: 12px 16px 6px;
    background-color: #f5f9fd;
    border: 1px solid #e3ecf6;
    border-radius: 12px;
}

.auth-form .auth-pw-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--coop-navy);
}

.auth-form .auth-pw .pw-rules-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 4px;
}

    .auth-form .auth-pw .pw-rules-list li {
        flex: 1 1 45%;
        min-width: 0;
        padding-right: 12px;
    }

@media (max-width: 575px) {
    .auth-form .auth-pw .pw-rules-list li {
        flex: 1 1 100%;
    }
}

/* --- ACTIONS AND TRAILING LINKS -------------------------------------------
   The buttons themselves are Bootstrap's - btn-block btn-lg btn-info on the
   login side, the .button classes the membership flow already uses on the other.
   This only spaces them, so neither side's button styling is touched. */
.auth-form .auth-actions {
    margin-top: 4px;
    margin-bottom: 12px;
}

.auth-form .auth-foot,
.auth-links {
    flex: 1 1 100%;
    margin-top: 4px;
    text-align: center;
    font-size: 14px;
    color: #5b7898;
}

.auth-links {
    margin-top: 16px;
}

/* --- THE REGULATORY LINE ---------------------------------------------------
   The cooperative's CDA standing, under the sign-in card. Quieter and smaller
   than the .auth-links above it, and separated by a hairline rather than by
   whitespace alone, because it is a statement about the coop rather than another
   thing to click.

   Neutral grey and not a brand token: it has to recede on whatever palette a
   white-labelled deployment sets, and --coop-primary is 3.6:1 on white, which is
   below the floor for text this size.

   The colour is #55697f and NOT the #7d8fa4 .auth-hint uses beside it. The card
   this renders on is WHITE - Login.css tints .info-card #e6f1fb, but #loginCard
   below it wins on specificity and paints #ffffff - and on white #7d8fa4 measures
   3.3:1, under the 4.5:1 AA floor for text this size, where #55697f is 5.6:1.
   .auth-hint's own contrast is pre-existing and is not touched here; a regulatory
   statement is not the place to inherit it.

   The hairline is #dbe6f2, which is #loginCard's own border colour, so the
   separator belongs to the card rather than reading as a stray rule across it.

   Nothing here is a fixed width, so it reflows at 360px on its own.
   Leo B. 09/15/2026 */
.auth-legal {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #dbe6f2;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: #55697f;
}

/* Capitals for display only. text-transform leaves the underlying text alone, so
   a screen reader still reads the stored name rather than spelling it out. */
.auth-legal-name {
    text-transform: uppercase;
    font-weight: 600;
}

/* --- A PAGE THAT IS A LETTER, NOT A FORM ----------------------------------
   Account verified, link expired, application received, and the like. Every one
   of them was a <table border="0" cellpadding="0" cellspacing="0" width="100%">
   wrapping a single cell - a layout table, which a screen reader announces as a
   data table with one row and one column before it reads the sentence inside. */
.auth-notice {
    padding: 18px 20px;
    font-size: 15px;
    line-height: 1.6;
    color: #37475c;
    background-color: #f5f9fd;
    border: 1px solid #e3ecf6;
    border-radius: 12px;
}

    .auth-notice p {
        margin: 0 0 10px;
    }

        .auth-notice p:last-child {
            margin-bottom: 0;
        }

    .auth-notice .auth-notice-salutation {
        display: block;
        margin-bottom: 10px;
        font-weight: 700;
        color: var(--coop-navy);
    }

    .auth-notice .auth-notice-signoff {
        margin-top: 14px;
        font-size: 14px;
        color: #6f8298;
    }

/* The row of exits under a notice or a form. */
.auth-exits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

    .auth-exits > * {
        flex: 1 1 180px;
        margin-bottom: 0;
    }