/* ============================================================================
 * Auth screens — brand layout
 *
 * The design is a single card split down the middle: the form on the left on
 * white, a navy panel on the right carrying the pitch. This applies it to the
 * markup the auth views already emit rather than rewriting six of them, so
 * login, register, forgot-password and reset all move together and a view that
 * gets added later inherits it without being told to.
 *
 * The card and the right-hand panel come from the layout. Everything below
 * restyles what the views put inside it: .auth-shell, .auth-card, .auth-head,
 * the Bootstrap form controls and the submit button.
 *
 * Loaded after agent.css, which the auth views push, so it wins on equal
 * specificity without needing !important for anything except the Bootstrap
 * rules that ship with it.
 * ========================================================================== */

/* ------------------------------------------------------------------ shell */

body.frontend-auth-layout {
    background: #DDE3EA;
}

/* Matches agent.css's own `body > .auth-content`, which is one point more
 * specific than a bare class and forces block flow. Written the same way here
 * so the later file wins, rather than with !important.
 *
 * height:auto and overflow:visible are carried over deliberately: they are why
 * a long register page can still scroll, and dropping them to centre the card
 * would trade one bug for a worse one. */
body > .auth-content {
    display: flex;
    min-height: 100vh;
    height: auto;
    overflow: visible;
    padding: 40px 20px;
    background: #DDE3EA;
    font-family: var(--front-font-primary);
}

.auth-brand-card {
    /* margin:auto rather than align-items:center on the parent. A flex item
     * centred by alignment cannot be scrolled back to once it overflows its
     * container, and register is taller than the viewport on a laptop.
     * Auto margins centre it and still let it scroll. */
    margin: auto;
    width: 1024px;
    max-width: 100%;
    /* The design fixes this at 760px. Register carries far more fields than
     * sign-in, so it is a floor rather than a height — a fixed one would clip
     * the longest form on the smallest screen that still counts as desktop. */
    min-height: 700px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #FFFFFF;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(15, 35, 80, 0.18);
}

.auth-brand-form {
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.auth-brand-mark {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 26px;
}

.auth-brand-mark img {
    height: 30px;
    width: auto;
}

.auth-brand-foot {
    margin-top: auto;
    padding-top: 28px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--ds-ink-mute);
}

.auth-brand-foot a {
    color: var(--ds-azure-text);
}

/* -------------------------------------------------------- the right panel */

.auth-brand-panel {
    position: relative;
    background: radial-gradient(circle at 30% 20%, #173063 0%, #0B1B3E 70%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 48px 40px 36px;
    color: #FFFFFF;
}

/* The grid is drawn rather than an image: it scales to any panel size, costs
 * nothing to load, and cannot go missing the way the CMS media did. */
.auth-brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(62, 90, 138, 0.55) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(62, 90, 138, 0.55) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: 0.5;
    pointer-events: none;
}

.auth-brand-panel > * {
    position: relative;
    z-index: 1;
}

.auth-brand-points {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    max-width: 330px;
    margin-top: 8px;
}

.auth-brand-point {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.auth-brand-point__icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-brand-point__icon svg {
    width: 18px;
    height: 18px;
}

.auth-brand-point__title {
    display: block;
    font-family: var(--front-font-display);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
}

.auth-brand-point__body {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: #B9C6DA;
}

.auth-brand-statement {
    text-align: center;
    max-width: 340px;
}

.auth-brand-statement__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.10);
    margin-bottom: 16px;
}

.auth-brand-statement h2 {
    font-family: var(--front-font-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0 0 10px;
    color: #FFFFFF;
}

.auth-brand-statement p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #B9C6DA;
}

/* ------------------------------------------------- the card the views emit */

/* The views wrap their content in .auth-shell > .auth-card, which used to be
 * the visible card. It now sits inside one, so its own frame is removed rather
 * than nested — two cards deep reads as a mistake. */
.auth-brand-form .auth-shell,
.auth-brand-form .auth-shell.is-long,
.auth-brand-form .auth-card {
    /* .auth-shell is a full-height flex centring context in agent.css — it used
     * to be the page. Inside a card that is already sized and centred, that
     * reserves a viewport of empty space above the heading. */
    display: block;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.auth-brand-form .auth-head {
    text-align: left;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* The lockup is already above the form; a second one inside the card is the
 * same logo twice. agent.css sets it at .auth-card .auth-head .auth-logo —
 * three classes — so this has to match that depth or the duplicate stays. */
.auth-brand-form .auth-card .auth-head .auth-logo,
.auth-brand-form .auth-logo {
    display: none;
}

/* The 3px role gradient along the top of .auth-card. It read as an edge on a
 * card that had one; with the frame gone it is a line floating above the
 * heading. */
.auth-brand-form .auth-card.has-accent::before {
    display: none;
}

.auth-brand-form .auth-title {
    font-family: var(--front-font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ds-navy);
    margin: 0 0 6px;
}

.auth-brand-form .auth-subtitle {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ds-ink-mute);
    margin: 0;
}

.auth-brand-form .auth-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    background: var(--ds-pale);
    color: var(--ds-azure-text);
    font-size: 11.5px;
    font-weight: 600;
}

.auth-brand-form .auth-section-heading {
    font-family: var(--front-font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-navy);
    margin: 20px 0 10px;
}

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

.auth-brand-form .form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-navy);
    margin-bottom: 7px;
}

.auth-brand-form .form-control,
.auth-brand-form .form-select {
    height: 48px;
    padding: 0 14px;
    border: 1px solid #C6D3E0;
    border-radius: 11px;
    font-size: 14.5px;
    color: var(--ds-navy);
    background-color: #FFFFFF;
    box-shadow: none;
}

.auth-brand-form textarea.form-control {
    height: auto;
    padding: 12px 14px;
}

.auth-brand-form .form-control:focus,
.auth-brand-form .form-select:focus {
    border-color: #1B8AD6;
    box-shadow: 0 0 0 3px #DCEBF8;
}

.auth-brand-form .form-control::placeholder {
    color: #8496A9;
}

/* Bootstrap's input-group splits the border across children. The design draws
 * one rounded field with an icon inside it, so the group becomes the field and
 * the parts inside it lose their own edges. */
.auth-brand-form .input-group {
    height: 48px;
    padding: 0 14px;
    border: 1px solid #C6D3E0;
    border-radius: 11px;
    background: #FFFFFF;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-brand-form .input-group:focus-within {
    border-color: #1B8AD6;
    box-shadow: 0 0 0 3px #DCEBF8;
}

.auth-brand-form .input-group > .form-control,
.auth-brand-form .input-group > .form-select {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    flex: 1;
    min-width: 0;
}

.auth-brand-form .input-group > .form-control:focus {
    box-shadow: none;
}

.auth-brand-form .input-group-text {
    padding: 0;
    border: 0;
    background: transparent;
    color: #8496A9;
    font-size: 14px;
}

/* --------------------------------------------------------------- actions */

/* agent.css paints this with the role gradient at .auth-card.is-user
 * .btn-submit-auth — three classes, so a two-class selector here loses
 * regardless of load order. Matching its depth is what makes the design's
 * solid navy stick. */
.auth-brand-form .auth-card .btn-submit-auth,
.auth-brand-form .auth-card .btn-primary,
.auth-brand-form .btn-submit-auth,
.auth-brand-form .btn-primary {
    height: 48px;
    width: 100%;
    border: 0;
    border-radius: 11px;
    background: var(--ds-navy);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-brand-form .auth-card .btn-submit-auth:hover,
.auth-brand-form .auth-card .btn-primary:hover,
.auth-brand-form .auth-card .btn-submit-auth:focus,
.auth-brand-form .auth-card .btn-primary:focus,
.auth-brand-form .btn-submit-auth:hover,
.auth-brand-form .btn-primary:hover {
    background: #1E3A6E;
    color: #FFFFFF;
}

.auth-brand-form .form-check-label,
.auth-brand-form .form-check-input + label {
    font-size: 13px;
    color: var(--ds-navy-soft);
}

.auth-brand-form .form-check-input:checked {
    background-color: var(--ds-navy);
    border-color: var(--ds-navy);
}

.auth-brand-form a {
    color: var(--ds-azure-text);
    font-weight: 500;
}

.auth-brand-form a:hover {
    color: var(--ds-navy);
}

/* --------------------------------------------------------- secondary action */

/* The way to registration, under the sign-in button.
 *
 * Outlined rather than solid so it cannot compete with Sign In: most people
 * arriving here have an account, and the page should not present two equally
 * weighted choices. It matches the submit button's height and radius so the
 * two read as a pair rather than as a button and an afterthought.
 *
 * Selector depth matches .btn-submit-auth above for the same reason that one
 * needed it — Bootstrap's .btn rules are more specific than a bare class. */
.auth-alt-action {
    margin-top: 18px;
    text-align: center;
}

.auth-alt-action__note {
    display: block;
    margin-bottom: 10px;
    font-size: 13.5px;
    color: var(--ds-ink-mute);
}

.auth-brand-form .auth-card .btn-auth-secondary,
.auth-brand-form .btn-auth-secondary {
    height: 48px;
    width: 100%;
    border: 1.5px solid var(--ds-navy);
    border-radius: 11px;
    background: transparent;
    color: var(--ds-navy);
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.auth-brand-form .auth-card .btn-auth-secondary:hover,
.auth-brand-form .auth-card .btn-auth-secondary:focus,
.auth-brand-form .btn-auth-secondary:hover,
.auth-brand-form .btn-auth-secondary:focus {
    background: var(--ds-navy);
    color: #FFFFFF;
}
/* --------------------------------------------------------------- responsive */

@media (max-width: 991.98px) {
    /* Below this the two columns would each be too narrow to read. The panel
     * is the half that can go: it is the pitch, and someone already at the
     * sign-in screen has had it. */
    .auth-brand-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .auth-brand-panel {
        display: none;
    }

    .auth-brand-form {
        padding: 40px 32px;
    }
}

@media (max-width: 575.98px) {
    body > .auth-content {
        padding: 0;
    }

    .auth-brand-card {
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
    }

    .auth-brand-form {
        padding: 32px 22px;
    }
}

/* ------------------------------------------------------------ signup flow */

/* Steps are only hidden once the script has taken charge of the form. Without
 * that class every fieldset stays visible and the form is the long single-page
 * one it has always been, which is what someone with JavaScript off gets. */
.signup-flow--stepped .signup-step[hidden] {
    display: none;
}

.signup-step {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0; /* fieldset defaults to min-content, which breaks the grid */
}

.signup-progress {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.signup-progress__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.signup-progress__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EEF2F7;
    color: var(--ds-ink-mute);
    font-size: 12.5px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}

.signup-progress__label {
    font-size: 11.5px;
    line-height: 1.25;
    color: var(--ds-ink-mute);
}

.signup-progress__step.is-active .signup-progress__dot,
.signup-progress__step.is-done .signup-progress__dot {
    background: var(--ds-navy);
    color: #FFFFFF;
}

.signup-progress__step.is-active .signup-progress__label {
    color: var(--ds-navy);
    font-weight: 600;
}

/* Back sits beside Continue rather than under it, so the pair reads as one
 * control and the forward action keeps the dominant width. */
.signup-nav {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.signup-nav [data-signup-back] {
    flex: 0 0 34%;
}

.signup-nav [data-signup-next],
.signup-nav [data-signup-submit] {
    flex: 1;
}

.signup-nav [hidden] {
    display: none;
}

/* Field-level rejection. The server used to report every problem in one alert
 * at the top of the form; in a stepped flow that alert can be three steps away
 * from the field it is describing. */
.auth-brand-form .auth-card .form-control.is-invalid,
.auth-brand-form .auth-card .form-select.is-invalid {
    border-color: #C0392B;
}

.signup-field-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #C0392B;
}

/* --------------------------------------------------------- submit, in flight */

/* The button while the server is working. Dimmed rather than greyed, so it
   still reads as the thing that was pressed rather than one that was never
   available. */
.auth-brand-form .auth-card .btn-submit-auth[disabled],
.auth-brand-form .btn-submit-auth[disabled] {
    opacity: 0.75;
    cursor: default;
}

/* A pulse, not a spinner: one element, no animation frames wasted on a
   rotation nobody looks at, and it cannot be mistaken for a progress bar
   that knows how long this will take. */
.auth-busy-dot {
    width: 9px;
    height: 9px;
    margin-right: 9px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    animation: auth-busy-pulse 1s ease-in-out infinite;
}

@keyframes auth-busy-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.82); }
    50%      { opacity: 1;    transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-busy-dot { animation: none; opacity: 0.8; }
}

/* ------------------------------------------------------------ other portals */

/* The way across to a different portal's sign-in. Quiet: most people are on
   the right one already, and it should not compete with the form. */
.auth-other-portals {
    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ds-ink-mute);
}

.auth-other-portals a {
    margin-left: 8px;
    color: var(--ds-navy);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(15, 35, 80, 0.22);
}

.auth-other-portals a:hover {
    border-bottom-color: var(--ds-navy);
}