/* Portal sign-in. Split shell: the story panel on the left, the access panel on the right.
   Sizes are in px on purpose - site.css sets html { font-size: 14px }, so rem is not 16px here. */

/* Only the two ALMADS brand greens are declared here. Nothing is tinted or shaded -
   where the design needs a lighter step, it is the same colour at reduced opacity.
     #485C42  brand dark green
     #9ECC3B  brand light green
   The cream/husk tones are the paper of the design, and the reds are error states;
   neither is a brand green. */
:root {
    --lg-forest: #485C42; /* brand dark, as-is */
    --lg-leaf: #9ECC3B; /* brand light, as-is */
    --lg-ink: #485C42; /* body text */
    --lg-ink-soft: rgba(72, 92, 66, .91); /* brand dark, muted - .91 keeps 4.5:1 on the cream card */
    --lg-ink-faint: rgba(72, 92, 66, .7); /* brand dark, placeholders and idle icons */
    --lg-leaf-veil: rgba(158, 204, 59, .16); /* brand light, hover tint */
    --lg-cream: #FAF7EC;
    --lg-card: #EDE9D1;
    --lg-well: #F6F3E7;
    --lg-hull: #DED6B9;
    --lg-hull-soft: #E7E1CA;
    --lg-paper: #F5F1E2; /* the ground the hero photo is laid onto */
    --lg-hero-opacity: .34;
    --lg-why-opacity: .82;
    --lg-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
    --lg-body: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Strip the app chrome this page does not use. */
body.login-page {
    margin-bottom: 0;
    background-image: none;
    background-color: var(--lg-cream);
    font-family: var(--lg-body);
}

    body.login-page .body-container {
        padding: 0 !important;
        max-width: none;
        /* site.css pins this to 100vh under 767px; the split shell sizes itself. */
        height: auto;
    }

    body.login-page .footer {
        display: none;
    }

/* Clarion sign-in keeps the app chrome, so it cannot use .login-page. It takes the
   same photo ground instead of the burlap texture site.css puts on the body.
   Fixed to the viewport and painted behind the content, so the navbar padding and
   the container gutters do not crop it. */
body.clarion-login {
    background-image: none;
    background-color: var(--lg-paper);
    font-family: var(--lg-body);
}

    /* kendo.default.mobile.min.css ships a body::before font-preload hack that pins
       width and height to 0. Those two must be restated here or this layer computes
       to 0x0 and paints nothing - inset alone does not override an explicit size. */
    body.clarion-login::before {
        content: "";
        position: fixed;
        inset: 0;
        width: auto;
        height: auto;
        z-index: -1;
        opacity: var(--lg-hero-opacity);
        background-image: url(../images/login-hero.png), url(../images/Almonds_Background_Lighter.jpg);
        background-size: cover, auto 190%;
        background-position: center center, center center;
        background-repeat: no-repeat, no-repeat;
    }

/* Shell -------------------------------------------------------------------- */

/* The photo is the ground for the whole page; both panels sit on it. */
.login-shell {
    position: relative;
    display: grid;
    /* 60/40, with a floor so the access panel never squeezes the form. */
    grid-template-columns: minmax(0, 60fr) minmax(430px, 40fr);
    min-height: 100vh;
    color: var(--lg-ink);
    background-color: var(--lg-paper);
}

    /* The photo sits on the cream paper at --lg-hero-opacity, the way it is layered in
       the design file, rather than under an opaque wash. The sack-weave texture behind it
       is the fallback if login-hero.png is missing; it is zoomed past the almonds along
       its edges so only the weave reads.
       Absolutely positioned, so it is not a grid item and does not claim a column. */
    .login-shell::before,
    .terminal-shell::before,
    .signup-shell::before,
    .auth-shell::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: var(--lg-hero-opacity);
        background-image: url(../images/login-hero.png), url(../images/Almonds_Background_Lighter.jpg);
        background-size: cover, auto 190%;
        background-position: center center, center center;
        background-repeat: no-repeat, no-repeat;
    }

/* Story panel -------------------------------------------------------------- */

.login-story {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 64px);
}

.login-story__inner {
    position: relative;
    width: 100%;
    max-width: 700px;
    text-align: center;
}

.login-title {
    margin: 0;
    font-family: var(--lg-display);
    font-weight: 700;
    font-size: clamp(34px, 3.6vw, 50px);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--lg-forest);
}

.login-tagline {
    margin: 10px 0 0;
    font-family: var(--lg-display);
    font-weight: 700;
    font-size: clamp(19px, 1.85vw, 25px);
    line-height: 1.3;
    color: var(--lg-forest);
}

.login-lede {
    margin: 18px auto 0;
    max-width: 56ch;
    font-size: 17px;
    line-height: 1.62;
    color: var(--lg-ink);
}

.login-credit {
    margin: 20px 0 18px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #485C42;
}

.login-copyright {
    margin: 18px 0 0;
    font-size: 12px;
    letter-spacing: .04em;
    text-align: left;
    color: #485C42;
}

/* Why card ----------------------------------------------------------------- */

/* Brand light green as a translucent pane, so the hero photo reads through it.
   --lg-why-opacity is the knob. */
.why-card {
    position: relative;
    overflow: hidden;
    padding: 18px clamp(18px, 2.4vw, 28px) 16px;
    border-radius: 20px;
    background-color: rgba(158, 204, 59, var(--lg-why-opacity));
    box-shadow: 0 22px 46px -26px rgba(72, 92, 66, .55);
    text-align: left;
}

    .why-card > * {
        position: relative;
    }

.why-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

    .why-card__head::before,
    .why-card__head::after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        background-color: rgba(72, 92, 66, .32);
    }

.why-card__title {
    font-family: var(--lg-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #485C42;
    white-space: nowrap;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.why-item {
    display: flex;
    align-items: center;
    gap: 11px;
}

.why-item__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background-color: #fff;
    color: var(--lg-forest);
    font-size: 17px;
    box-shadow: 0 3px 8px rgba(72, 92, 66, .22);
}

.why-item__label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #485C42;
}

.why-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
}

.why-card__note {
    /* Fills the foot row up to the Learn more button rather than wrapping early. */
    flex: 1 1 auto;
    margin: 0;
    max-width: none;
    font-size: 12px;
    line-height: 1.5;
    color: var(--lg-ink-soft);
}

.why-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border-radius: 999px;
    background-color: var(--lg-forest);
    color: #fff;
    font-family: var(--lg-display);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 8px 18px -10px rgba(72, 92, 66, .9);
    transition: filter .18s ease, transform .18s ease;
}

    .why-cta:hover,
    .why-cta:focus {
        filter: brightness(1.15);
        color: #fff;
        text-decoration: none;
        transform: translateX(2px);
    }

    .why-cta i {
        font-size: 12px;
    }

/* Access panel ------------------------------------------------------------- */

.login-access {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 3vw, 44px) clamp(20px, 2.6vw, 40px);
}

.login-access__inner {
    width: 100%;
    /* Grows with the wider panel so the card does not float in cream. */
    max-width: clamp(420px, 30vw, 520px);
}

/* The wordmark sits straight on the photo, so it needs a transparent asset. */
.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.login-brand__img {
    display: block;
    width: min(100%, 400px);
    height: auto;
    object-fit: contain;
}

.login-card {
    padding: 22px clamp(18px, 2vw, 26px) 20px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 22px;
    background-color: var(--lg-card);
    /* Lifted off the photo rather than sitting flat on a matching panel. */
    box-shadow: 0 30px 60px -28px rgba(72, 92, 66, .55), 0 2px 10px rgba(72, 92, 66, .12);
}

.login-card__head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.login-card__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid var(--lg-forest);
    color: var(--lg-forest);
    font-size: 17px;
}

.login-card__title {
    margin: 0;
    font-family: var(--lg-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.15;
    color: var(--lg-forest);
}

.login-card__sub {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--lg-ink-soft);
}

.login-alert {
    margin-bottom: 14px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid #E2B4AC;
    background-color: #FBEDEA;
    font-size: 12.5px;
    color: #A03826;
}

/* Portal tiles ------------------------------------------------------------- */

.portal-tiles {
    display: flex;
    gap: 9px;
    margin: 6px 0 18px;
    padding: 0;
    list-style: none;
}

    .portal-tiles > li {
        flex: 1 1 0;
        min-width: 0;
    }

.portal-tiles .portal-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 13px 6px 10px;
    border: 2px solid var(--lg-forest);
    border-radius: 14px;
    background-color: var(--lg-well);
    color: #485C42;
    text-align: center;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}

    .portal-tiles .portal-tile:hover,
    .portal-tiles .portal-tile:focus {
        border-color: var(--lg-forest);
        background-color: #fff;
        color: #485C42;
        text-decoration: none;
        transform: translateY(-2px);
    }

    /* Selected reverses out: solid brand dark green, everything on it white.
       Sits after the :hover rule at equal specificity, so an active tile stays dark on hover. */
    .portal-tiles .portal-tile.active {
        background-color: var(--lg-forest);
        border-color: var(--lg-forest);
        color: #fff;
        box-shadow: 0 0 0 3px rgba(158, 204, 59, .4), 0 12px 24px -16px rgba(72, 92, 66, .9);
    }

.portal-tile__icon {
    font-size: 19px;
    line-height: 1;
    color: var(--lg-ink-faint);
    transition: color .18s ease;
}

.portal-tiles .portal-tile.active .portal-tile__icon {
    color: #fff;
}

.portal-tile__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
}

.portal-tile__check {
    position: absolute;
    top: -7px;
    right: -7px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: var(--lg-forest);
    color: #fff;
    font-size: 9px;
}

.portal-tiles .portal-tile.active .portal-tile__check {
    display: flex;
    /* Keeps the base dark circle and white tick; the white ring is what separates
       it from the dark tile it now overlaps. */
    box-shadow: 0 0 0 2px #fff;
}

/* Form --------------------------------------------------------------------- */

.field {
    margin-bottom: 13px;
}

.field__label {
    display: block;
    margin-bottom: 5px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #485C42;
}

.field__wrap {
    position: relative;
}

.lg-form .field__control {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 15px;
    border: 1px solid var(--lg-hull);
    border-radius: 12px;
    background-color: #fff;
    font-family: var(--lg-body);
    font-size: 14.5px;
    color: var(--lg-ink);
    transition: border-color .16s ease, box-shadow .16s ease;
}

    .lg-form .field__control::placeholder {
        color: var(--lg-ink-faint);
    }

    .lg-form .field__control:focus {
        outline: none;
        border-color: var(--lg-forest);
        box-shadow: 0 0 0 3px rgba(158, 204, 59, .4);
    }

/* jquery.validate.unobtrusive marks the offending input, not just the message. */
.lg-form .field__control.input-validation-error {
    border-color: #C0553F;
    background-color: #FFFBFA;
}

    .lg-form .field__control.input-validation-error:focus {
        border-color: #C0553F;
        box-shadow: 0 0 0 3px rgba(192, 85, 63, .22);
    }

.field__control--upper {
    text-transform: uppercase;
}

    /* The value is upper-cased, the prompt is not. */
    .lg-form .field__control--upper::placeholder {
        text-transform: none;
    }

.field--password .field__control {
    padding-right: 46px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background-color: transparent;
    color: var(--lg-ink-faint);
    font-size: 14px;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

    .password-toggle:hover,
    .password-toggle:focus {
        background-color: var(--lg-leaf-veil);
        color: var(--lg-forest);
    }

.lg-form .text-danger {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.4;
    color: #A03826;
}

.lg-form .text-danger:empty {
    display: none;
}

.resend-confirmation {
    display: inline-block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lg-forest);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 14px;
}

    /* Remember me is commented out of Index.cshtml, so the row currently holds the
       forgot-password link alone and space-between would park it on the left. This
       stops matching by itself the moment the checkbox is restored. */
    .field-row > :only-child {
        margin-left: auto;
    }

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--lg-ink-soft);
    cursor: pointer;
}

.checkbox__input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--lg-forest);
    cursor: pointer;
}

.link-quiet {
    font-size: 13px;
    color: var(--lg-forest);
    text-decoration: none;
    border-bottom: 1px solid rgba(72, 92, 66, .35);
}

    .link-quiet:hover,
    .link-quiet:focus {
        color: var(--lg-forest);
        text-decoration: none;
        border-bottom-color: var(--lg-forest);
    }

.login-submit {
    display: block;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background-color: var(--lg-forest);
    color: #fff;
    font-family: var(--lg-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 14px 26px -16px rgba(72, 92, 66, .95);
    transition: filter .18s ease, transform .12s ease, box-shadow .18s ease;
}

    .login-submit:hover,
    .login-submit:focus {
        filter: brightness(1.15);
    }

    .login-submit:active {
        transform: translateY(1px);
        box-shadow: 0 8px 16px -12px rgba(72, 92, 66, .95);
    }

.login-signup {
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid rgba(72, 92, 66, .18);
    text-align: center;
}

.login-signup__q {
    font-size: 12.5px;
    color: var(--lg-ink-soft);
}

.login-signup__link {
    display: inline-block;
    margin-left: 4px;
    font-weight: 700;
    font-size: 13px;
    color: var(--lg-forest);
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .login-signup__link:hover,
    .login-signup__link:focus {
        color: var(--lg-forest);
    }

/* bootstrap-select (Company / Site) dressed to match the plain fields. */
/* Matches bootstrap-select's own 220px default selector so this wins without !important. */
.lg-form .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100%;
}

.lg-form .bootstrap-select > .dropdown-toggle {
    text-align: left;
    height: 46px;
    padding: 0 15px;
    border: 1px solid var(--lg-hull);
    border-radius: 12px;
    background-color: #fff;
    font-family: var(--lg-body);
    font-size: 14.5px;
    color: var(--lg-ink);
    box-shadow: none;
}

    .lg-form .bootstrap-select > .dropdown-toggle:focus {
        outline: none !important;
        border-color: var(--lg-forest);
        box-shadow: 0 0 0 3px rgba(158, 204, 59, .4);
    }

/* bootstrap-select stretches .filter-option to the full button height and lets the
   label sit at the top of it. Center it so it lines up with the plain inputs. */
.lg-form .bootstrap-select .filter-option {
    display: flex;
    align-items: center;
}

.lg-form .bootstrap-select .filter-option-inner {
    min-width: 0;
}

.lg-form .bootstrap-select .dropdown-menu {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--lg-hull);
    border-radius: 14px;
    background-color: #fff;
    box-shadow: 0 18px 40px -22px rgba(72, 92, 66, .85);
}

.lg-form .bootstrap-select .bs-searchbox {
    padding: 2px 2px 8px;
}

    .lg-form .bootstrap-select .bs-searchbox .form-control {
        height: 38px;
        padding: 0 12px;
        border: 1px solid var(--lg-hull);
        border-radius: 10px;
        background-color: var(--lg-well);
        font-family: var(--lg-body);
        font-size: 14px;
        color: var(--lg-ink);
        box-shadow: none;
    }

        .lg-form .bootstrap-select .bs-searchbox .form-control:focus {
            outline: none;
            border-color: var(--lg-forest);
            box-shadow: 0 0 0 3px rgba(158, 204, 59, .4);
        }

.lg-form .bootstrap-select .dropdown-menu .dropdown-item {
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--lg-ink);
    white-space: normal;
}

    .lg-form .bootstrap-select .dropdown-menu .dropdown-item:hover,
    .lg-form .bootstrap-select .dropdown-menu .dropdown-item:focus {
        background-color: var(--lg-leaf-veil);
        color: var(--lg-forest);
    }

    .lg-form .bootstrap-select .dropdown-menu .dropdown-item.active,
    .lg-form .bootstrap-select .dropdown-menu .dropdown-item.selected {
        background-color: var(--lg-forest);
        color: #fff;
    }

.lg-form .bootstrap-select .no-results {
    margin: 0;
    padding: 8px 12px;
    background-color: transparent;
    font-size: 13px;
    color: var(--lg-ink-soft);
}

/* Clarion sign-in ---------------------------------------------------------- */

/* Keeps the navbar and footer, so only the card changes: same .login-card surface
   as the portal and terminal screens instead of a plain bootstrap .card. */
.clarion-shell {
    display: flex;
    justify-content: center;
    padding: clamp(16px, 3vh, 40px) 0 clamp(24px, 5vh, 56px);
}

.clarion-card {
    width: 100%;
    max-width: 520px;
    padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 28px);
}

/* Terminal sign-in --------------------------------------------------------- */

/* Same ground, same tokens as the portal page - only the furniture differs: a
   heading and one centred card, sized up for a touch screen read at arm's length. */
.terminal-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: clamp(22px, 3.4vh, 44px) clamp(20px, 4vw, 56px) clamp(14px, 2vh, 24px);
    color: var(--lg-ink);
    background-color: var(--lg-paper);
}

    .terminal-shell > * {
        position: relative;
        z-index: 1;
    }

.terminal-title {
    margin: 0 0 clamp(18px, 3.2vh, 36px);
    font-family: var(--lg-display);
    font-weight: 700;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.1;
    letter-spacing: -.02em;
    text-align: center;
    color: var(--lg-forest);
}

/* The card is the whole screen - centred, capped, nothing beside it. */
.terminal-card {
    width: 100%;
    max-width: 580px;
    padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.6vw, 36px) clamp(24px, 2.8vw, 34px);
}

    .terminal-card .login-card__avatar {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }

    /* Held to one line beside the avatar at the card width above. */
    .terminal-card .login-card__title {
        font-size: clamp(17px, 1.8vw, 23px);
    }

/* The icons hang in a left gutter, so the labels, the inputs and the button all
   share one left edge instead of stepping in and out around the icons. */
.terminal-form {
    padding-left: 36px;
}

    .terminal-form .field {
        margin-bottom: 18px;
    }

    .terminal-form .field__label {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-family: var(--lg-display);
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
    }

    .terminal-form .field__icon {
        flex: 0 0 36px;
        margin-left: -36px;
        font-size: 19px;
        color: var(--lg-forest);
    }

    .terminal-form .field__control {
        height: 54px;
        padding: 0 17px;
        border-radius: 14px;
        font-size: 16px;
    }

    .terminal-form .field--password .field__control {
        padding-right: 54px;
    }

    .terminal-form .password-toggle {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* Match the plain inputs the bootstrap-select button sits among. */
    .terminal-form .bootstrap-select .dropdown-toggle {
        height: 54px;
        border-radius: 14px;
        font-size: 16px;
    }

    .terminal-form .login-submit {
        height: 56px;
        margin-top: 4px;
        border-radius: 14px;
        font-size: 18px;
    }

.terminal-copyright,
.signup-copyright,
.auth-copyright {
    /* Pinned to the bottom-right of the screen, clear of the card. */
    align-self: flex-end;
    margin: auto 0 0;
    padding-top: 20px;
    font-family: var(--lg-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--lg-forest);
}

/* Grower / Handler sign-up ------------------------------------------------- */

/* Same ground and the same card as the terminal screen. The one thing this form does
   differently is put each label beside its field rather than above it.
   The password reset screens want this shell unchanged, so they share the rule. */
.signup-shell,
.auth-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: clamp(20px, 3.2vh, 40px) clamp(16px, 4vw, 56px) clamp(14px, 2vh, 24px);
    color: var(--lg-ink);
    background-color: var(--lg-paper);
}

    .signup-shell > *,
    .auth-shell > * {
        position: relative;
        z-index: 1;
    }

.signup-card {
    width: 100%;
    max-width: 640px;
    padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px) clamp(22px, 2.6vw, 28px);
}

    .signup-card .login-card__head {
        margin-bottom: 22px;
    }

    .signup-card .login-card__avatar {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }

    .signup-card .login-card__title {
        font-size: clamp(20px, 2.2vw, 26px);
    }

/* One fixed label column, so every field starts on the same left edge. The mock steps
   them in and out, which is the one thing from it not worth copying. */
.signup-form .field {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
    gap: 6px 16px;
    margin-bottom: 14px;
}

    .signup-form .field__label {
        /* Sentence case and larger than the portal card's micro-labels, per the mock. */
        margin: 0;
        /* Centres a 14px label against the 46px field beside it. */
        padding-top: 13px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: var(--lg-forest);
    }

/* The control column. Holds the field and its validation message, so a message
   never pushes the label out of line. */
.signup-field {
    min-width: 0;
}

/* Company is a textarea, so it cannot take the fixed field height. */
.signup-form textarea.field__control {
    height: auto;
    min-height: 82px;
    padding: 11px 15px;
    line-height: 1.45;
    resize: vertical;
}

/* Google renders the captcha as a fixed-size iframe; it only has to line up. */
.signup-captcha {
    padding-top: 2px;
}

/* Submit and Cancel split one row half and half, so the pair spans the full card
   width and Cancel lands on the right.
   Grid rather than flex: on a border-box item flex-basis: 0 floors at padding plus
   border, and these two do not carry the same padding, so flex quietly handed
   Cancel the wider half. minmax(0, 1fr) twice is exact whatever the padding. */
.signup-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 20px;
}

    /* Both stretch to their track, so neither needs a width of its own. */
    .signup-actions .login-submit,
    .signup-actions .login-cancel {
        width: auto;
        min-width: 0;
    }

/* The quiet half of the pair: same height and radius as the submit, outlined
   rather than filled, so it reads as the way out and not a second action. */
.login-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 48px;
    padding: 0 22px;
    border: 1px solid var(--lg-forest);
    border-radius: 12px;
    background-color: transparent;
    color: var(--lg-forest);
    font-family: var(--lg-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease;
}

    .login-cancel:hover,
    .login-cancel:focus {
        background-color: var(--lg-leaf-veil);
        color: var(--lg-forest);
        text-decoration: none;
    }

/* Password reset ----------------------------------------------------------- */

/* Three short screens sharing one card: ask which account, set the new password, and
   the outcome page that reports on both. They keep the portal card's label-above-field
   layout - there are too few fields here for the sign-up screen's label column to earn
   its width. */
.auth-card {
    width: 100%;
    /* Wide enough for the captcha iframe, which is a fixed 304px. */
    max-width: 470px;
    /* Nothing sits above the card on these screens, so it is dropped clear of the top. */
    margin-top: clamp(12px, 10vh, 104px);
    padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px) clamp(22px, 2.6vw, 28px);
}

    .auth-card .login-card__head {
        margin-bottom: 20px;
    }

    .auth-card .login-card__avatar {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

/* The outcome page's one paragraph: the email-sent, link-expired or password-changed
   notice, whichever brought the operator here. */
.auth-message {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--lg-ink-soft);
}

/* On the outcome page the action is a link rather than a submit, so it has to be given
   the centring and the colour a <button> gets for free. */
a.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

    a.login-submit:hover,
    a.login-submit:focus {
        color: #fff;
        text-decoration: none;
    }

/* Focus visibility --------------------------------------------------------- */

/* Text fields carry their own focus ring, so an outline here would double up. */
.login-shell a:focus-visible,
.login-shell button:focus-visible,
.login-shell input[type="checkbox"]:focus-visible,
.terminal-shell a:focus-visible,
.terminal-shell button:focus-visible,
.signup-shell a:focus-visible,
.signup-shell button:focus-visible,
.auth-shell a:focus-visible,
.auth-shell button:focus-visible {
    outline: 2px solid var(--lg-forest);
    outline-offset: 2px;
}

/* Entrance ----------------------------------------------------------------- */

@keyframes lg-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.login-story__inner > *,
.login-access__inner > *,
.terminal-shell > *,
.signup-shell > *,
.auth-shell > * {
    animation: lg-rise .5s cubic-bezier(.22, .68, .36, 1) both;
}

.login-story__inner > :nth-child(2) {
    animation-delay: .05s;
}

.login-story__inner > :nth-child(3) {
    animation-delay: .1s;
}

.login-story__inner > :nth-child(4) {
    animation-delay: .14s;
}

.login-story__inner > :nth-child(5) {
    animation-delay: .18s;
}

.login-story__inner > :nth-child(6) {
    animation-delay: .22s;
}

.login-story__inner > :nth-child(7) {
    animation-delay: .26s;
}

.login-access__inner > :nth-child(2) {
    animation-delay: .08s;
}

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .login-shell {
        grid-template-columns: minmax(0, 1fr) minmax(370px, .92fr);
    }

    .why-card__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 991.98px) {
    .terminal-copyright,
    .signup-copyright,
    .auth-copyright {
        align-self: center;
    }

    .login-shell {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .login-access {
        order: 1;
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .login-story {
        order: 2;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .login-credit {
        text-align: center;
    }

    .login-copyright {
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .signup-form .field {
        grid-template-columns: minmax(0, 1fr);
    }

        .signup-form .field__label {
            padding-top: 0;
        }

    .why-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-lede {
        font-size: 15px;
    }

    .portal-tile__label {
        font-size: 9px;
        letter-spacing: .08em;
    }

    .login-card {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-story__inner > *,
    .login-access__inner > *,
    .terminal-shell > *,
    .signup-shell > *,
    .auth-shell > * {
        animation: none;
    }

    .portal-tiles .portal-tile,
    .why-cta,
    .login-submit {
        transition: none;
    }

        .portal-tiles .portal-tile:hover,
        .why-cta:hover {
            transform: none;
        }
}