/*****************************************************************/
/* MX Login Page Shell — loaded ONLY by ExternalLogin.aspx        */
/*****************************************************************/

/* Neutralize the master page's decorative top band on this page only.
   This selector only has effect because this stylesheet is only ever
   <link>-ed from ExternalLogin.aspx's own headerContentPlaceHolder. */
#topSectionWrapper {
    display: none;
}

#bodyContainer,
#siteBodyContent,
#main_content,
#print_content {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.mx-shell {
    font-family: var(--mx-font-family);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background: var(--mx-color-background-paper);
}

@media only screen and (min-width: 1024px) {
    .mx-shell {
        flex-direction: row;
    }
}

.mx-shell__brand-panel {
    display: none;
}

@media only screen and (min-width: 1024px) {
    .mx-shell__brand-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* MX parity (WI 13158): AuthLayout's BrandPanel is top-aligned and the
           carousel below it is flex:1 — the slide group centers itself in the
           free space via its own auto margins while the dots pin to the
           panel's bottom edge. */
        justify-content: flex-start;
        background-color: var(--mx-color-background-brand-panel);
        color: var(--mx-color-text-primary);
        padding-top: var(--mx-space-10);
        padding-bottom: var(--mx-space-4);
        padding-left: var(--mx-space-3);
        padding-right: var(--mx-space-3);
        position: relative;
    }
}

.mx-shell__brand-header {
    display: flex;
    align-items: center;
    gap: var(--mx-space-2);
}

@media only screen and (min-width: 1024px) {
    .mx-shell__brand-header {
        position: absolute;
        top: var(--mx-space-6);
        left: var(--mx-space-6);
        /* MX BrandContent gap = theme.spacing(2.25) at the lg breakpoint */
        gap: 18px;
    }
}

.mx-shell__brand-name {
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    color: var(--mx-color-primary);
}

@media only screen and (min-width: 1024px) {
    .mx-shell__brand-name {
        font-size: 24px;
    }
}

.mx-shell__brand-carousel {
    width: 100%;
    max-width: 624px;
    /* flex:1 stretches the carousel over the brand panel's full height
       (AuthLayout's BrandPanelCarousel) so the dots can ride the bottom. */
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Brand carousel — ports BrandCarousel.styled.ts. These classes are
   emitted by Scripts/mx-brand-carousel.js on both the desktop and the
   mobile-intro carousel containers. --- */
.mx-carousel {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* MX nests the slide text in a 16px-gap group inside a 24px-gap column;
       this DOM is flat, so the column gap is 16px and the illustration row
       adds the extra 8px below itself. */
    gap: var(--mx-space-2);
}

.mx-carousel__illustration-row {
    /* auto margins here + on the dots split the free space, which reproduces
       MX's "SlideGroup flex:1, justify-content:center, Dots margin-top:auto" */
    margin-top: auto;
    margin-bottom: var(--mx-space-1);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mx-space-3);
}

.mx-carousel__illustration-frame {
    width: 100%;
    max-width: 200px;
    min-width: 0;
    aspect-ratio: 1 / 1;
    position: relative;
    flex: 0 1 auto;
}

@media only screen and (min-width: 1024px) {
    .mx-carousel__illustration-frame {
        max-width: 240px;
    }
}

.mx-carousel__illustration-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mx-carousel__arrow {
    appearance: none;
    border: none;
    padding: 0;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--mx-color-primary);
    color: var(--mx-color-primary-contrast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.mx-carousel__arrow:hover {
    opacity: 0.85;
}

.mx-carousel__arrow:focus-visible {
    outline: 2px solid var(--mx-color-primary);
    outline-offset: 2px;
}

/* MX hides the arrows below the sm breakpoint (640px) — mobile is swipe/dots only */
@media only screen and (max-width: 639px) {
    .mx-carousel__arrow {
        display: none;
    }
}

.mx-carousel__slide-title {
    margin: 0;
    text-align: center;
    font-family: var(--mx-font-family);
    font-size: var(--mx-h1-size);
    line-height: var(--mx-h1-line);
    font-weight: var(--mx-h1-weight);
    letter-spacing: var(--mx-h1-spacing);
    color: var(--mx-color-text-primary);
}

.mx-carousel__slide-subtitle {
    margin: 0;
    text-align: center;
    font-family: var(--mx-font-family);
    font-size: var(--mx-body1-size);
    line-height: var(--mx-body1-line);
    font-weight: var(--mx-body1-weight);
    color: var(--mx-color-text-primary);
}

/* Must be out of flow: it is a flex child, so an in-flow version adds a
   phantom 16px gap above the dots and shows its announcement text. */
.mx-carousel__visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.mx-carousel__dots {
    margin-top: auto;
    padding-top: var(--mx-space-1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mx-space-2);
}

.mx-carousel__dot {
    appearance: none;
    border: none;
    padding: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--mx-grey-300);
    cursor: pointer;
    transition: background-color 150ms ease;
}

.mx-carousel__dot--active {
    background-color: var(--mx-color-primary);
}

.mx-carousel__dot:focus-visible {
    outline: 2px solid var(--mx-color-primary);
    outline-offset: 2px;
}

.mx-shell__mobile-header {
    display: flex;
    align-items: center;
    /* MX's MobileHeader is space-between only because it has a second child
       (the language switcher). With the switcher dropped, the logo and the
       wordmark form one left-aligned brand group — MX BrandContent gap =
       theme.spacing(1.5). */
    justify-content: flex-start;
    gap: 12px;
    padding: var(--mx-space-3);
    color: var(--mx-color-primary);
}

@media only screen and (min-width: 1024px) {
    .mx-shell__mobile-header {
        display: none;
    }
}

.mx-shell__lang-switcher {
    display: none;
}

@media only screen and (min-width: 1024px) {
    .mx-shell__lang-switcher {
        display: block;
        position: absolute;
        top: var(--mx-space-6);
        right: var(--mx-space-6);
        font-family: var(--mx-font-family);
        font-size: var(--mx-subtitle2-size);
        font-weight: var(--mx-subtitle2-weight);
        letter-spacing: var(--mx-subtitle2-spacing);
        color: var(--mx-color-text-secondary);
        z-index: 1;
    }
}

.mx-shell__form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

@media only screen and (min-width: 1024px) {
    .mx-shell__form-panel {
        align-items: center;
        justify-content: center;
    }
}

/* Mobile pre-form intro carousel — matches MobileOnboardingIntro.styled.ts */
.mx-mobile-intro {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--mx-space-3);
    padding-top: var(--mx-space-1);
    padding-bottom: calc(var(--mx-space-2) + env(safe-area-inset-bottom, 0px));
    /* MX renders the intro inside Login's Container (max-width 420, 32px side
       padding), so the carousel and copy are constrained too — not just the
       action buttons. */
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mx-space-4);
    padding-right: var(--mx-space-4);
    box-sizing: border-box;
}

.mx-mobile-intro.mx-mobile-intro--hidden {
    display: none;
}

@media only screen and (min-width: 1024px) {
    .mx-mobile-intro {
        display: none !important;
    }
}

.mx-mobile-intro__actions {
    display: grid;
    /* minmax(0,1fr), not bare 1fr: a bare 1fr track's minimum is the
       cell's min-content, and the nowrap "Create Account" label would
       force unequal columns. Capping the minimum keeps the two buttons
       equal-width like MX; the label centers and eats into the button's
       own side paddings instead. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--mx-space-2);
    /* The 420px/32px constraint lives on the parent .mx-mobile-intro now. */
    width: 100%;
}

/* Form area — hidden on mobile until "Log in" is tapped; always shown at
   desktop widths regardless of JS state, matching Login.styled.ts's
   FormView (display:none when $hidden, forced flex at the lg breakpoint). */
.mx-form-area {
    display: none;
    width: 100%;
    flex: 1;
}

.mx-form-area.mx-form-area--visible {
    display: flex;
    flex-direction: column;
}

/* User request: center the login card in the middle of the page. The
   form area fills the form panel's height (flex:1); centering its content
   vertically + horizontally floats the card in the middle, with the
   fixed footer pinned below it. */
.mx-form-area.mx-form-area--visible,
.mx-form-area {
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 1024px) {
    .mx-form-area {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

/*****************************************************************/
/* MX Login Card restyle                                          */
/*****************************************************************/

.mx-login-card {
    font-family: var(--mx-font-family);
    width: 100%;
    /* Matches MX's true Login.styled.ts Container: maxWidth 420,
       padding theme.spacing(4)=32px (--mx-space-4). A previous request had
       widened this to 630px/48px (1.5x scale); reverted per user request
       (card was too wide) back to MX's actual proportions. */
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    background: var(--mx-color-background-paper);
    padding: var(--mx-space-4);
    padding-bottom: calc(var(--mx-space-4) + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

@media only screen and (min-width: 640px) {
    .mx-login-card {
        padding-bottom: var(--mx-space-4);
        padding-top: 0;
    }
}

/* The legacy "Log In to Your Benefits" header (#headerSection) is removed
   from the MX card's markup directly (flag-On branch of ExternalLogin.aspx),
   not hidden here — hiding it via display:none broke the whole card, because
   the header's inner `<div class="loginToYourBenefits" ... />` is a malformed
   self-closing div that HTML parses as UNCLOSED, causing the rest of the
   card to nest inside #headerSection. Deleting the block is the correct fix
   and matches the user's request to remove that header. The flag-Off legacy
   layout keeps its own (untouched) #headerSection. */

.mx-login-card__title-group {
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-2);
    /* MX: TitleGroup's own 8px bottom margin + FormSection's 24px stack gap.
       This flat DOM has no FormSection between title and fields, so the two
       are flattened into one 32px margin. */
    margin-bottom: var(--mx-space-4);
    text-align: left;
}

@media only screen and (min-width: 1024px) {
    .mx-login-card__title-group {
        text-align: center;
        align-items: center;
    }
}

/* Mobile-only illustration above "Login" — Login.styled.ts Illustration:
   max-width 220, left-aligned, 8px below, hidden at the lg breakpoint. */
.mx-login-card__illustration {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin-bottom: var(--mx-space-1);
}

@media only screen and (min-width: 1024px) {
    .mx-login-card__illustration {
        display: none;
    }
}

.mx-login-card__title {
    font-size: var(--mx-h1-size);
    line-height: var(--mx-h1-line);
    font-weight: var(--mx-h1-weight);
    letter-spacing: var(--mx-h1-spacing);
    color: var(--mx-color-text-primary);
    margin: 0;
}

.mx-login-card__subtitle {
    font-size: var(--mx-body1-size);
    line-height: var(--mx-body1-line);
    font-weight: var(--mx-body1-weight);
    color: var(--mx-color-text-primary);
    margin: 0;
}

/* MX Button — matches theme/components/Button.ts styleOverrides exactly.
   white-space: nowrap keeps short labels ("Create Account") on one line in
   the narrow mobile-intro action grid, per the target design; a label a few
   px wider than the content box eats into the 22px side paddings invisibly
   instead of wrapping onto a second line inside the fixed 48px pill. */
.mx-btn,
#externalEntraLoginButton,
.btnContinue {
    font-family: var(--mx-font-family);
    height: 48px;
    padding: 12px 22px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-transform: none;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: none;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.mx-btn--contained,
#externalEntraLoginButton {
    background-color: var(--mx-color-primary) !important;
    background-image: none !important;
    color: var(--mx-color-primary-contrast);
    width: 100%;
    float: none;
}

.mx-btn--contained:hover,
#externalEntraLoginButton:hover {
    background-color: var(--mx-color-primary) !important;
}

/* User request: "Continue" (classic-login submit) should match the
   "Sign in with MyFBG" black-pill theme. Background/color only — kept
   separate from the width:100%/float:none rule above since Continue
   sits inline in its credential row, not full-width like the primary CTA. */
.btnContinue {
    background-color: var(--mx-color-primary) !important;
    background-image: none !important;
    color: var(--mx-color-primary-contrast) !important;
}

.btnContinue:hover {
    background-color: var(--mx-color-primary) !important;
    color: var(--mx-color-primary-contrast) !important;
}

.mx-btn--outlined {
    background: transparent;
    border: 2px solid var(--mx-color-primary);
    color: var(--mx-color-primary);
    width: 100%;
}

.mx-btn--outlined:hover {
    background: transparent;
    border: 2px solid var(--mx-color-primary);
}

.mx-btn--contained:disabled,
.mx-btn--outlined:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Classic-login toggle link + collapsed form */
#classicLoginToggle {
    font-family: var(--mx-font-family);
    font-size: var(--mx-body1-size);
    color: var(--mx-color-text-primary);
    text-decoration: underline;
}

#mxRegisterLink,
.entraHeader,
.entraLink,
.entraLoading {
    font-family: var(--mx-font-family) !important;
}

#mxRegisterLink {
    /* MX FormSection's 24px gap separates the form from the new-user prompt */
    margin-top: var(--mx-space-3);
    font-size: var(--mx-body1-size);
    line-height: var(--mx-body1-line);
    text-align: center;
    color: var(--mx-color-text-primary);
}

#mxRegisterLink a {
    color: var(--mx-color-text-primary);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: underline;
}

/* Text inputs across every classic-login panel (username/password, SSN+DOB,
   Employee ID+Group#) — all share the .lbl_input wrapper, so one rule set
   covers every field. */
.lbl_input input[type="text"],
.lbl_input input[type="password"] {
    font-family: var(--mx-font-family) !important;
    height: 48px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    padding: 0 14px !important;
    font-size: var(--mx-body1-size) !important;
    border: 1px solid var(--mx-grey-500);
    border-radius: 4px;
    color: var(--mx-color-text-secondary);
}

.lbl_input input[type="text"]:hover,
.lbl_input input[type="password"]:hover {
    border-color: var(--mx-grey-900);
}

.lbl_input input[type="text"]:focus,
.lbl_input input[type="password"]:focus {
    border-color: var(--mx-color-primary);
    border-width: 2px;
    outline: none;
}

.lbl_input span {
    font-family: var(--mx-font-family);
    color: var(--mx-color-text-secondary);
    font-size: var(--mx-body1-size);
}

/* User request: remove the "Returning User? / New User?" mode-picker
   (username/password vs. SSN vs. Employee ID) entirely, since new users
   now go through "Register here" (the MX registration flow) instead.
   Server-side, username/password (pnlReturningUser) is always the
   default panel unless a ?LoginMode=SSN-style query string is present
   (ExternalLoginPresenter.Initialize()) — that deep-link path renders a
   different, independent panel inside #credentialOptions and does not
   depend on this picker UI, so hiding it here is safe in both cases. */
#innerSection {
    display: none;
}

/* User request: username/password labels were right-justified
   (inherited from .selectedBlock's text-align:right at >=600px in
   External.css) — left-justify them. height/padding: External.css caps
   .selectedBlock at 175px and pads it 20px (breakpoint-dependent), which
   squeezes the fields narrower than MX's 356px content width and, below
   600px, overlaps the overflowing rows with the content after the panel. */
.mx-login-card .selectedBlock {
    text-align: left;
    height: auto;
    padding: 0;
}

/* Legacy shell insets (#contentSection margin 10px + padding 20px 5px,
   plus !important phone variants at <=600px) don't exist in MX — the
   card's own 32px padding is the only intended inset. */
.mx-login-card #contentSection {
    margin: 0 !important;
    padding: 0 !important;
}

/* External.css's phone block (max-width:600px) reflows the CLASSIC login
   card (floats each credential row right, shrinks .btnContinue to
   180x50 @14pt, drops fonts to 10pt — several with !important). The MX
   card keeps its own responsive layout, so neutralize those inside
   .mx-login-card at the same breakpoint, with !important where the
   legacy declaration is also !important. */
@media only screen and (max-width: 600px) {
    .mx-login-card .viewportCredentials {
        float: none;
        padding: 0 !important;
    }

    .mx-login-card .btnContinue {
        width: 100% !important;
        height: 48px !important;
        font-size: 16px !important;
        float: none;
    }

    .mx-login-card .lbl_input {
        font-size: var(--mx-body1-size) !important;
    }
}

/* User request: right-justify just the "Forgot Username or Password?"
   row and the Continue-button row, while username/password stay
   left-justified per the rule above. Both rows share the same
   .viewportCredentials class as every other row with no unique id, so
   they're distinguished by content: the forgot row is the only one
   containing an <a> (the two LinkButtons), and the button row is the
   only one containing .btnContinue. */
.mx-login-card .viewportCredentials:has(a),
.mx-login-card .viewportCredentials:has(.btnContinue) {
    text-align: right;
}

/* "Forgot password?" — MX ForgotPasswordLink metrics (Login.styled.ts):
   16px/24px, weight 700, 0.5px tracking. The forgot row is the only
   .viewportCredentials with an <a>; the metrics sit on the row so the
   link inherits them. */
.mx-login-card .viewportCredentials:has(a) {
    font-size: var(--mx-body1-size);
    line-height: 24px;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.mx-login-card .viewportCredentials:has(a) a {
    font-weight: 700;
}

/* The show/hide-password eye (#togglePassword) would otherwise wrap onto
   its own line below the width:100% password input (it's an inline
   sibling <div>); overlay it inside the field instead, dead-centered the
   way MX's end adornment sits. position:relative on every
   .viewportCredentials row is harmless for rows without an
   absolutely-positioned child; the !importants override the div's inline
   style="...margin:auto...height:40px" (shared with the classic layout,
   so it can't be removed from the markup). */
.mx-login-card .viewportCredentials {
    position: relative;
}

.lbl_input input[type="password"] {
    padding-right: 44px !important;
}

#togglePassword {
    position: absolute;
    right: 14px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    height: 24px !important;
    line-height: 0;
    margin: 0 !important;
    color: var(--mx-color-text-secondary);
}

/* User request: all remaining non-black help/footer links on this card
   should be black. ("Register here" and "Use your username and
   password" are already forced black above; these are the rest.)
   lblHavingTroubleLoggingIn/lblLearnAboutMFA/lblMFAIsComing are
   asp:Label server controls; Web.config sets <pages clientIDMode="AutoID">,
   which mangles their rendered id with naming-container prefixes (e.g.
   "ctl00_bodyContentPlaceHolder_udPanel_lblMFAIsComing") — a bare
   #lblMFAIsComing selector never matches. [id$="..."] matches the
   rendered id regardless of prefix. */
#entraLoginSection .entraHeader,
#entraLoginSection .entraLink,
[id$="lblHavingTroubleLoggingIn"],
[id$="lblLearnAboutMFA"],
[id$="lblMFAIsComing"],
.viewportCredentials a {
    color: var(--mx-color-text-primary) !important;
}

/* User request: hide the "Forgot Username" half of the forgot-link row,
   keeping only "Forgot password?" visible, per the target design. */
.mx-hidden {
    display: none;
}

/* User request: in MX mode the whole "Forgot password" is one continuous
   link, black and bold. The link ships with an inline display:none so it
   stays hidden in classic mode (where this stylesheet isn't loaded); this
   rule reveals it under the MX card (!important overrides the inline style).
   Color/weight are set explicitly so the entire phrase — not just the old
   "password" fragment — renders black and bold. */
.mx-login-card .viewportCredentials .mx-forgot-password-link {
    display: inline !important;
    color: var(--mx-color-text-primary) !important;
    font-weight: 700 !important;
}

/* User request: match the member-facing MX login exactly — hide the
   legacy CMS-only notices ("Logins are now authenticated…", "Having
   trouble logging in?", "Learn about additional security") and the
   "FBG Employee? Log In via Entra" workforce-login link. Hidden, not
   removed from the DOM, so the flag-Off legacy layout stays
   byte-identical; these selectors only bite inside .mx-login-card,
   which renders only when the MX flag is on. */
.mx-login-card .viewportThirdOptionContainer,
.mx-login-card .loginFooterRow {
    display: none;
}

/* User request: match the target design's field rows — vertical gap
   between rows (MX's actual Login.styled.ts Form gap = theme.spacing(3)
   = 24px), and floating labels inside the input border (MUI
   OutlinedInput look) instead of a separate label line above the field. */
.mx-login-card .lbl_input.viewportCredentials {
    margin-bottom: var(--mx-space-3);
}

/* The forgot-password row is immediately followed by the button row's
   own margin-top:10px, so it doesn't need the standard gap below it too
   — :last-of-type would be wrong here (the button row is also a <div>
   positioned after it, so it's not actually the last div of its type);
   :has(a) identifies it the same way the existing right-align rule does. */
.mx-login-card .lbl_input.viewportCredentials:has(a) {
    margin-bottom: 0;
}

/* MX's Form gap is 24px between every row; the "Log in" row carries an
   inline style="margin-top:10px" in the markup (shared with the classic
   layout), so !important is required to widen it here. */
.mx-login-card .viewportCredentials:has(.btnContinue) {
    margin-top: var(--mx-space-3) !important;
}

/* The label sits permanently on the field's top border (MUI's shrunk
   InputLabel position), for every field, in every state.

   It used to start centred inside the box and float up on :focus or
   :not(:placeholder-shown). That is the MUI animation, but it depends on the
   browser restyling the label the moment the value changes — which does not
   happen for credentials the browser autofills, since that fills the field
   with no user interaction and raises no input/change event. The label then
   stayed centred, on top of the masked password. Successive attempts to
   detect the fill (:-webkit-autofill, an animationstart hook, a scripted
   value check) did not resolve it, so per user request the position is now
   unconditional: there is no state to detect and nothing to keep in sync.

   Sizing is MUI's explicit shrunk InputLabel — 12px/14px/700/0.5px from
   theme/components/InputLabel.ts — not a scaled-down 16px, which would
   render 13.6px at weight 400. The paper background and horizontal padding
   punch the label through the input's border line. */
.mx-login-card .lbl_input span.mx-field-label {
    position: absolute;
    left: 10px;
    top: 0;
    transform: translateY(-50%);
    font-family: var(--mx-font-family);
    font-size: var(--mx-subtitle2-size);
    line-height: var(--mx-subtitle2-line);
    font-weight: 700;
    letter-spacing: var(--mx-subtitle2-spacing);
    color: var(--mx-color-text-secondary);
    background: var(--mx-color-background-paper);
    padding: 0 4px;
    pointer-events: none;
    white-space: nowrap;
}

.mx-login-card .lbl_input span.mx-field-label .required {
    color: var(--mx-color-error);
}

/* User request: "Log in" (classic-login submit) should be full-width,
   matching "Sign in with MyFBG" and the target design, rather than the
   shrink-wrapped right-aligned button from the previous iteration.
   btnContinueExisting is an asp:Button (runat=server), so its rendered
   id is AutoID-mangled — [id$="..."] matches regardless of prefix. */
[id$="btnContinueExisting"] {
    width: 100%;
    float: none;
}

/* Support footer — ports MX's Footer.styled.ts. Sits in NORMAL FLOW as the
   form panel's last child (the markup places it right after #mxFormArea,
   whose flex:1 soaks up the free height and keeps the bar on the panel's
   bottom edge). Static, not absolute, so it can never overlap the card or
   fall off-screen when the page grows taller than the viewport on mobile.
   width:100% matters at >=1024px, where the form panel is
   align-items:center and would otherwise shrink-wrap the bar. */
.mx-support-footer {
    position: static;
    width: 100%;
    min-height: 43px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mx-space-1);
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--mx-grey-50);
    font-family: var(--mx-font-family);
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--mx-color-text-primary);
}

/* The legacy master-page footer ("The Contractors Plan" image bar) isn't
   part of the MX design; keep it hidden on the MX view so the page ends
   at the login card. Only affects the MX view — this stylesheet isn't
   loaded at flag-Off. */
#bottom_content_outer {
    display: none;
}

.mx-support-footer svg {
    flex-shrink: 0;
    color: var(--mx-color-text-primary);
}

.mx-support-footer a {
    color: var(--mx-color-text-primary) !important;
    font-weight: 700;
    text-decoration: underline;
    /* MX PhoneLink: the number never wraps mid-value */
    white-space: nowrap;
}

/* --- Entra multi-account chooser — visual match to MX's SelectAccountPage ----
   A PANEL, not a modal: #mxSelectAccountPanel carries .mx-login-card, so the
   card chrome, width and padding are already the login card's, and it simply
   takes #centerSection's place. That is what MX does by routing to
   /select-account, and what the Verify Code panel below already does here.

   Tokens mirror SelectAccountPage.styled.ts one for one: 16px gap between
   cards, 16px card padding, 16px radius, grey-300 border, and the secondary
   tint on hover/focus. */
.mx-select-account-list {
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-2);
    /* The <ul> is a layout device; strip the list chrome the browser adds. */
    list-style: none;
    margin: 0;
    padding: 0;
}

.mx-account-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    text-align: left;
    font-family: var(--mx-font-family);
    padding: var(--mx-space-2);
    border: 1px solid var(--mx-grey-300);
    border-radius: 16px;
    background-color: var(--mx-color-background-paper);
    cursor: pointer;
}

.mx-account-card:hover,
.mx-account-card:focus-visible {
    border-color: var(--mx-color-secondary);
    background-color: var(--mx-color-secondary-extralight);
}

/* Cards are disabled for the length of the round trip that redeems the parked
   token, so the frozen state has to read as "working", not as "broken". */
.mx-account-card[disabled] {
    cursor: default;
    opacity: 0.6;
}

.mx-account-card[disabled]:hover {
    border-color: var(--mx-grey-300);
    background-color: var(--mx-color-background-paper);
}

.mx-account-card__name {
    font-size: var(--mx-subtitle1-size);
    line-height: var(--mx-subtitle1-line);
    font-weight: 600;
    color: var(--mx-color-text-primary);
    /* Legacy usernames are free-form and can be long enough to overflow a
       narrow phone card. */
    overflow-wrap: anywhere;
}

.mx-account-card__role {
    font-size: var(--mx-body1-size);
    line-height: var(--mx-body1-line);
    font-weight: var(--mx-body1-weight);
    color: var(--mx-color-text-secondary);
}

/* Always rendered — never display:none — so the role="status" live region is in
   the accessibility tree from parse time and the script's text write is what
   announces. Empty is the resting state, so collapse its margin then: an empty
   block is already zero-height, and this stops it reserving 16px above the
   "Back to login" link for a message that is not there. */
.mx-select-account-status {
    margin: var(--mx-space-2) 0 0 0;
    font-family: var(--mx-font-family);
    font-size: var(--mx-body1-size);
    line-height: var(--mx-body1-line);
    color: var(--mx-color-text-secondary);
}

.mx-select-account-status:empty {
    margin: 0;
}

/* A link, not a button: MX's page offers no way back, but CMS parks a validated
   token in Session here and this is what releases it — so it has to exist while
   staying visually subordinate to the account cards. */
.mx-select-account-back {
    align-self: flex-start;
    margin-top: var(--mx-space-3);
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--mx-font-family);
    font-size: var(--mx-body1-size);
    line-height: var(--mx-body1-line);
    font-weight: 700;
    color: var(--mx-color-text-primary);
    text-decoration: underline;
    cursor: pointer;
}

.mx-select-account-back:hover {
    color: var(--mx-color-primary-light);
}

/* --- Native-auth Verify Code panel (spec §3.3) — visual match to MX's
   MfaChallenge screen (MemberExperience.UI/src/features/mfa/MfaChallenge.tsx
   + MfaChallenge.styled.ts + components/MfaInput). Reuses the
   --mx-* tokens from MxLoginTheme.css so this stays in lockstep with the
   ported MX theme rather than hardcoding a second copy of the palette. */

.mx-native-login-error {
    color: var(--mx-color-error);
    font-size: var(--mx-body1-size);
    margin-top: var(--mx-space-2);
}

/* Sign-in failure alert — ports MX's MUI Alert (severity="error",
   variant="standard"): the error tint as the surface, the error colour for
   icon and text, 4px radius to match the input fields, and the icon aligned
   to the first line of the message so it stays put when the text wraps.

   CMS previously showed this as the shared command framework's floating
   .applicationErrors popup, anchored beside the Log in button with a bulleted
   list and a close box. The message content is unchanged; only its
   presentation and position move here, above the fields, as in MX. */
.mx-login-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--mx-space-1);
    margin-bottom: var(--mx-space-3);
    padding: 6px 16px;
    border-radius: 4px;
    background: var(--mx-color-error-extralight);
    color: var(--mx-color-error);
    font-family: var(--mx-font-family);
    font-size: var(--mx-body1-size);
    line-height: var(--mx-body1-line, 1.5);
    text-align: left;
}

.mx-login-alert__icon {
    flex: 0 0 auto;
    /* Nudge down so the glyph's optical centre lines up with the cap height of
       the first line rather than its top edge. */
    margin-top: 2px;
}

.mx-login-alert__text {
    flex: 1 1 auto;
}

/* Sign-in progress lives inside the button instead of the shared framework's
   floating "Please wait..." popup, which is styled for the classic CMS chrome
   and looks out of place on this page.

   That popup cannot be turned off through InvokeCommand: its message and
   progressIcon defaults are applied to any falsy value, so passing "" just
   restores them. Hiding it by class is safe here because this stylesheet is
   only served when IsExternalEntraMemberLoginVisible() is true, and the login
   command is the only InvokeCommand reachable from the MX card. */
.applicationErrorsInProgress {
    display: none !important;
}

.mx-login-submit {
    position: relative;
}

/* mxSetLoginBusy clears the button's value while busy (an input's label is its
   value, and it cannot hold a child element or ::after). The button is
   width:100%, so an empty label leaves its footprint unchanged and nothing
   below it reflows. */
.mx-login-submit.is-busy .btnContinue {
    cursor: default;
}

.mx-login-submit__spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--mx-color-primary-contrast);
    border-radius: 50%;
    animation: mx-login-spin 0.7s linear infinite;
    pointer-events: none;
}

.mx-login-submit.is-busy .mx-login-submit__spinner {
    display: block;
}

@keyframes mx-login-spin {
    to { transform: rotate(360deg); }
}

/* Respect a reduced-motion preference: keep the busy affordance, drop the
   continuous rotation. */
@media (prefers-reduced-motion: reduce) {
    .mx-login-submit__spinner {
        animation: none;
        border-top-color: var(--mx-color-primary-contrast);
        opacity: 0.8;
    }
}

/* Overrides .mx-login-card's widened 630px/48px sizing (that was a
   separate, earlier request specific to the classic login card) with MX's
   true MfaChallenge.styled.ts Container dimensions: maxWidth 420,
   padding theme.spacing(3)=24px below the sm breakpoint (640px),
   theme.spacing(4)=32px at/above it. Restoring the real proportions here
   is what brings every element inside the card (title, OTP boxes,
   buttons) back to matching MX's actual layout, without resizing each one
   individually. */
.mx-verify-card {
    display: flex;
    flex-direction: column;
    max-width: 420px;
    padding: var(--mx-space-3);
    padding-bottom: calc(var(--mx-space-3) + env(safe-area-inset-bottom, 0px));
}

@media only screen and (min-width: 640px) {
    .mx-verify-card {
        padding: var(--mx-space-4);
        padding-bottom: var(--mx-space-4);
    }
}

.mx-verify-illustration {
    display: block;
    width: 134px;
    height: auto;
    margin-bottom: var(--mx-space-3);
    margin-inline: 0;
}

@media only screen and (min-width: 1024px) {
    .mx-verify-illustration {
        margin-inline: auto;
    }
}

.mx-verify-form {
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-3);
}

.mx-verify-code-label {
    display: block;
    font-family: var(--mx-font-family);
    font-size: var(--mx-subtitle1-size);
    line-height: var(--mx-subtitle1-line);
    font-weight: var(--mx-subtitle1-weight);
    letter-spacing: var(--mx-subtitle1-spacing);
    color: var(--mx-color-text-primary);
    margin-bottom: var(--mx-space-1);
}

/* OTP boxes — one box per digit, rendered by entra-native-auth.js from the
   server-supplied CodeLength, backed by a single hidden real input
   (mirrors MfaInput.tsx: visible boxes are pure presentation, the hidden
   input owns focus/selection so platform autofill / one-time-code keeps
   working). */
.mx-otp-boxes {
    position: relative;
    display: flex;
    /* justify-content:center (not width:max-content — that value collapsed
       box sizing in this legacy stylesheet stack) centers the fixed-size
       row of boxes as a group within the full-width container, which is
       the proven-working width from the original full-stretch layout. */
    justify-content: center;
    gap: var(--mx-space-1);
    width: 100%;
    cursor: text;
}

.mx-otp-box {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 36px !important;
    width: 36px !important;
    aspect-ratio: 36 / 48;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mx-font-family);
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    color: var(--mx-color-text-primary);
    background-color: var(--mx-color-background-paper);
    border: 1px solid var(--mx-grey-500);
    border-radius: 8px;
    user-select: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mx-otp-box.mx-otp-box--filled {
    border-color: var(--mx-color-text-primary);
}

.mx-otp-box.mx-otp-box--focused {
    border-color: var(--mx-color-primary);
    box-shadow: 0 0 0 1px var(--mx-color-primary);
}

.mx-otp-boxes.mx-otp-boxes--error .mx-otp-box {
    border-color: var(--mx-color-error);
}

.mx-otp-boxes.mx-otp-boxes--disabled .mx-otp-box {
    border-color: var(--mx-grey-400);
    cursor: not-allowed;
}

/* !important throughout: Style/Layout.css has a sitewide
   input[type="text"] { border; border-radius; position: relative;
   padding-left } rule whose specificity (element+attribute) beats a bare
   class selector regardless of stylesheet order, which otherwise breaks
   this element's absolute-overlay positioning (it drops to position:relative
   and renders its own visible border as a 9th flex item, squeezing the real
   boxes to slivers — this is the exact bug the mx-* input rules below the
   original .lbl_input block already work around the same way). */
.mx-otp-hidden-input {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: transparent !important;
    caret-color: transparent !important;
    cursor: text;
    outline: none !important;
    font-size: 16px;
    letter-spacing: 0.75em;
    box-sizing: border-box;
}

.mx-otp-hidden-input::selection {
    background-color: transparent;
    color: transparent;
}

.mx-otp-hidden-input:disabled {
    cursor: not-allowed;
}

.mx-verify-error {
    color: var(--mx-color-error);
    font-size: var(--mx-body1-size);
}

/* Right-aligned inline resend prompt — Figma: "Didn't receive a code? RESEND",
   pulled up 8px from the normal 24px form gap (net 16px from the OTP boxes),
   matching MfaChallenge.styled.ts's ResendPrompt. */
.mx-verify-resend-row {
    text-align: right;
    margin-top: calc(var(--mx-space-1) * -1);
    font-family: var(--mx-font-family);
    font-size: var(--mx-body1-size);
    line-height: var(--mx-body1-line);
    color: var(--mx-color-text-primary);
}

.mx-resend-link {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: underline;
    color: var(--mx-color-text-primary);
    cursor: pointer;
}

.mx-resend-link[disabled],
.mx-resend-link.mx-resend-link--disabled {
    color: var(--mx-grey-400);
    cursor: not-allowed;
}

.mx-verify-notice {
    color: var(--mx-color-primary);
    font-size: var(--mx-body1-size);
}

/* Countdown pill — rounded, tinted background + icon, matches
   MfaChallenge.styled.ts's TimerAlert. Info (active countdown) vs. error
   (expired) variants toggled via .mx-timer-pill--expired. */
.mx-timer-pill {
    display: flex;
    align-items: center;
    border-radius: 999px;
    padding: 10px 16px;
    background-color: var(--mx-color-secondary-extralight);
    color: var(--mx-color-primary);
}

.mx-timer-pill .mx-timer-icon {
    flex-shrink: 0;
    margin-right: var(--mx-space-1);
    color: var(--mx-color-primary);
}

.mx-timer-pill #mxVerifyCodeTimerText {
    font-family: var(--mx-font-family);
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
}

.mx-timer-pill.mx-timer-pill--expired {
    background-color: var(--mx-color-error-extralight);
    color: var(--mx-color-error);
}

.mx-timer-pill.mx-timer-pill--expired .mx-timer-icon {
    color: var(--mx-color-error);
}

.mx-timer-pill.mx-timer-pill--expired .mx-timer-icon:not(.mx-timer-icon--expired) {
    display: none !important;
}

.mx-timer-pill:not(.mx-timer-pill--expired) .mx-timer-icon--expired {
    display: none !important;
}

/* Back button icon layout — MUI's startIcon renders icon + 8px gap + label;
   .mx-btn (MxLoginPage.css) already covers the pill shape/colors, this just
   adds the icon row layout on top. */
.mx-btn--icon-left {
    gap: var(--mx-space-1);
}

.mx-btn--icon-left svg {
    flex-shrink: 0;
}

/* "Use Text Message Instead" — tertiary centered text link (visual parity
   only; see markup comment — stubbed pending the SMS-support follow-on). */
.mx-use-other-method {
    align-self: center;
    font-family: var(--mx-font-family);
    font-size: var(--mx-body1-size);
    line-height: var(--mx-body1-line);
    font-weight: 500;
    color: var(--mx-color-text-primary);
    text-decoration: none;
    cursor: pointer;
}

/* --- Method Picker panel (SMS/Email choice) — matches MX's MfaMethodPicker
   pixel-for-pixel (docs/superpowers/specs/2026-07-23-cms-sms-mfa-method-picker-design.md) --- */
.mx-picker-illustration {
    display: block;
    width: 120px;
    height: 120px;
    margin-bottom: var(--mx-space-3);
    margin-inline: auto;
}

.mx-method-tabs {
    display: flex;
    width: 100%;
    border-radius: 999px;
    background-color: var(--mx-grey-100);
    padding: 0;
    gap: 0;
}

.mx-method-tab {
    flex: 1;
    border: 1px solid transparent;
    border-radius: 999px;
    background-color: transparent;
    color: var(--mx-color-text-primary);
    font-family: var(--mx-font-family);
    font-size: var(--mx-body1-size);
    font-weight: 600;
    line-height: var(--mx-body1-line);
    padding-block: 12px;
    cursor: pointer;
}

.mx-method-tab[aria-selected="true"] {
    background-color: var(--mx-color-background-paper);
    border-color: var(--mx-color-text-primary);
}

.mx-method-preview {
    margin: 0;
    text-align: center;
    font-family: var(--mx-font-family);
    font-size: var(--mx-body1-size);
    line-height: var(--mx-body1-line);
    color: var(--mx-color-primary);
}

.mx-method-preview strong {
    font-weight: 700;
}