/*****************************************************************/
/* MX Login Page Shell — loaded ONLY by ExternalLogin.aspx        */
/*                                                                */
/* A port of Member Experience's "Layered Paper" login screens:   */
/* layouts/AuthLayout, features/login, features/mfa (MfaChallenge, */
/* MfaMethodPicker), components/MfaInput, BrandCarousel, Footer   */
/* and pages/selectAccount, with the theme overrides they use     */
/* (Button, OutlinedInput, InputLabel, Alert, Link). Values are   */
/* copied 1:1 from those files — change them there first.         */
/*****************************************************************/

/* 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;
}

/* 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 support bar. Only affects the MX view — this stylesheet isn't
   loaded at flag-Off. */
#bottom_content_outer {
    display: none;
}

/*****************************************************************/
/* Shell — AuthLayout                                             */
/*****************************************************************/

/* Mobile: a white screen whose top sits on a 380px cream band ending in a
   white wave (layeredPaper.ts authCanvas). Desktop: the whole screen is the
   cream canvas under the soft-blob artwork. The support bar is the shell's
   last child, so it spans the full width below both halves. */
.mx-shell {
    font-family: var(--mx-font-family);
    color: var(--mx-color-text-body);
    /* MX sets tabular figures on <body>, so every number (the support line's
       phone, the code timer) keeps even digit widths. */
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background-color: var(--mx-color-background-paper);
    background-image:
        var(--mx-auth-wave),
        linear-gradient(var(--mx-color-background-brand-panel), var(--mx-color-background-brand-panel));
    background-repeat: no-repeat;
    background-size: 100% 78px, 100% 380px;
    background-position: 0 302px, 0 0;
}

/* The legacy stylesheets give links and form controls their own font
   (Avenir); everything in the MX shell is Rubik. */
.mx-shell a,
.mx-shell b,
.mx-shell strong,
.mx-shell button,
.mx-shell input,
.mx-shell label {
    font-family: var(--mx-font-family);
}

/* The full cream canvas under the login art: the whole desktop screen, and
   the mobile screen while the intro carousel shows (MX's useFullAuthCanvas,
   held by MobileOnboardingIntro). The intro carries --hidden once "Log in"
   is tapped, which drops mobile back to the band. On desktop the intro is
   display:none but keeps its class, so the :has() rule matches there too —
   with the same canvas. */
.mx-shell:has(.mx-mobile-intro:not(.mx-mobile-intro--hidden)) {
    background: var(--mx-color-background-brand-panel) url('../Images/MxLogin/auth-background.svg') center / cover no-repeat;
}

@media only screen and (min-width: 1024px) {
    .mx-shell {
        background: var(--mx-color-background-brand-panel) url('../Images/MxLogin/auth-background.svg') center / cover no-repeat;
    }
}

/* AuthLayout Body. Desktop: two balanced halves (layeredPaper.ts authSplit)
   — the carousel centered in the left, the card centered in the right —
   48px insets outside and a 96px gutter between. Below 1,184px wide the
   right half holds at the card's width and the left half gives way. */
.mx-shell__body {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

@media only screen and (min-width: 1024px) {
    .mx-shell__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(496px, 1fr);
        column-gap: 96px;
        padding: 40px 48px 0;
        box-sizing: border-box;
    }
}

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

@media only screen and (min-width: 1024px) {
    .mx-shell__brand-panel {
        display: flex;
        flex-direction: column;
        min-width: 0;
        color: var(--mx-color-text-primary);
    }
}

/* Desktop brand mark: the 32px logo, 12px, then the wordmark. */
.mx-shell__brand-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mx-shell__logo {
    display: block;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
}

.mx-shell__brand-name {
    font-weight: 700;
    font-size: 21px;
    line-height: 24px;
    letter-spacing: -0.3px;
    color: var(--mx-color-brand-logo);
    white-space: nowrap;
}

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

.mx-shell__brand-carousel {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--mx-space-3);
    padding-bottom: 44px;
    box-sizing: border-box;
}

/* --- 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 centers [art row, slide copy] in a flex:1 slide group and pins the
   dots under it, 24px apart. This DOM is flat, so the art row and the dots
   each take an auto top margin, splitting the free space the same way. --- */
.mx-carousel {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mx-space-3);
}

.mx-carousel__illustration-row {
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mx-space-3);
}

/* Login art: 230px on the 402 frame, 250px beside the desktop form. */
.mx-carousel__illustration-frame {
    width: 100%;
    max-width: 230px;
    min-width: 0;
    aspect-ratio: 1 / 1;
    position: relative;
    flex: 0 1 auto;
}

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

/* 36px black disc arrows either side of the art. */
.mx-carousel__arrow {
    appearance: none;
    border: none;
    padding: 0;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: var(--mx-radius-pill);
    background: var(--mx-color-primary);
    color: var(--mx-color-primary-contrast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--mx-motion-state);
}

.mx-carousel__arrow:hover {
    background-color: var(--mx-color-primary-dark);
}

.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;
    }
}

/* Every slide's copy shares one grid cell, so the viewport is as tall as
   the tallest slide; only the active one is visible. */
.mx-carousel__viewport {
    width: 100%;
    display: grid;
    grid-template-areas: "slide";
}

.mx-carousel__slide {
    grid-area: slide;
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-2);
    text-align: center;
}

.mx-carousel__slide--inactive {
    visibility: hidden;
    pointer-events: none;
}

/* Slide title at the screen-title scale: 34/42 on the 402 frame. */
.mx-carousel__slide-title {
    margin: 0;
    font-family: var(--mx-font-family);
    font-size: 34px;
    line-height: 42px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--mx-color-text-primary);
    text-wrap: pretty;
}

.mx-carousel__slide-subtitle {
    margin: 0;
    font-family: var(--mx-font-family);
    font-size: var(--mx-body1-size);
    line-height: var(--mx-body1-line);
    font-weight: 400;
    color: var(--mx-color-text-body);
    text-wrap: pretty;
}

/* Desktop: 250px art, 36px between it and the arrows, a 40/48 title and a
   17/25 subtitle 14px under it. */
@media only screen and (min-width: 1024px) {
    .mx-carousel__illustration-row {
        gap: 36px;
    }

    .mx-carousel__illustration-frame {
        max-width: 250px;
    }

    .mx-carousel__slide {
        gap: 14px;
    }

    .mx-carousel__slide-title {
        font-size: 40px;
        line-height: 48px;
        letter-spacing: -1.1px;
    }

    .mx-carousel__slide-subtitle {
        font-size: 17px;
        line-height: 25px;
    }
}

/* Must be out of flow: it is a flex child, so an in-flow version adds a
   phantom gap above the dots (or above the Verify Code panel's controls)
   and shows its announcement text. */
.mx-carousel__visually-hidden,
.mx-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: 10px;
}

/* Pagination — the active slide is a 30px black capsule, the rest 11px dots. */
.mx-carousel__dot {
    appearance: none;
    border: none;
    padding: 0;
    width: 11px;
    height: 11px;
    border-radius: var(--mx-radius-pill);
    background-color: var(--mx-grey-300);
    cursor: pointer;
    position: relative;
    transition: width var(--mx-motion-lift), background-color var(--mx-motion-state);
}

/* A 27px tap target around each dot. */
.mx-carousel__dot::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: var(--mx-radius-pill);
}

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

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

/* Mobile brand bar — 56px, the 28px logo and "FBG" on the left. MX puts the
   EN/ES switcher on the right; CMS has no Spanish, so the brand stands alone. */
.mx-shell__mobile-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    min-height: 56px;
    padding: 0 var(--mx-space-2);
    box-sizing: border-box;
}

.mx-shell__mobile-header .mx-shell__logo {
    width: 28px;
    height: 28px;
}

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

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

/* MX's desktop form panel opens with the EN/ES switcher row, which is what
   the card centers under. CMS has no Spanish, so this holds the row's height
   (--mx-auth-header-row, derived in MxLoginTheme.css from MX's
   LanguageSwitcher) and the card sits exactly where MX's does. */
@media only screen and (min-width: 1024px) {
    .mx-shell__form-panel {
        align-items: stretch;
    }

    .mx-shell__form-panel::before {
        content: "";
        display: block;
        flex: 0 0 var(--mx-auth-header-row);
    }
}

/* Mobile pre-form intro carousel — MobileOnboardingIntro inside Login's
   Container: the 420px column on a 16px gutter, the carousel 8px under the
   brand bar and the Create Account / Log in pair 34px under the dots. The
   pair sits 40px above the support bar (the intro's 16px plus the
   container's 24px). */
.mx-mobile-intro {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 34px;
    padding-top: var(--mx-space-1);
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mx-space-2);
    padding-right: var(--mx-space-2);
    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. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    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).
   On mobile the form starts right under the brand bar; on desktop the card
   centers in the right half, 24px of air above it and 100px below.

   This replaces an earlier user request to center the card vertically on
   mobile too, and the matching one for black links on the card: both were
   made to match MX's July design, and the 2026-10 request is to match MX's
   Layered Paper design, which top-aligns the mobile form and draws links in
   the Accent. */
.mx-form-area {
    display: none;
    width: 100%;
    flex: 1;
}

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

@media only screen and (min-width: 1024px) {
    .mx-form-area {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: var(--mx-space-3) 0 100px;
        box-sizing: border-box;
    }
}

/*****************************************************************/
/* The card — login, Verify Code, method picker, account chooser  */
/*****************************************************************/

/* Mobile: the form sits straight on the screen (transparent, so the cream
   band shows behind the art and title) in the 420px column on a 16px
   gutter. Desktop: the white card — 496px, radius 22, 52/40 padding and
   the warm shadow that reads against the cream canvas. */
.mx-login-card {
    font-family: var(--mx-font-family);
    color: var(--mx-color-text-body);
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    background: transparent;
    padding: 6px var(--mx-space-2) calc(var(--mx-space-3) + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

@media only screen and (min-width: 1024px) {
    .mx-login-card {
        flex: 0 0 auto;
        width: 496px;
        max-width: 100%;
        margin: 0;
        padding: 52px 40px;
        background: var(--mx-color-background-paper);
        border-radius: var(--mx-radius-card);
        box-shadow: var(--mx-elevation-auth-card);
    }
}

/* 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. The flag-Off legacy layout keeps its
   own (untouched) #headerSection. */

/* Title block — left-aligned on mobile, centered in the desktop card; 10px
   between title and subtitle (12px from lg), and the screen's 24px stack
   gap below it. */
.mx-login-card__title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--mx-space-3);
    text-align: left;
}

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

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

.mx-login-card__subtitle {
    font-family: var(--mx-font-family);
    font-size: var(--mx-body1-size);
    line-height: var(--mx-body1-line);
    font-weight: 400;
    color: var(--mx-color-text-body);
    margin: 0;
    /* A long masked email has no break opportunity; let it break rather than
       run past the column on a narrow phone. */
    overflow-wrap: anywhere;
}

/* Mobile art at the top of each screen, left-aligned, 24px above the title:
   210px for the login and code screens, 160px for the padlock. The desktop
   card drops it — the brand carousel beside it is the art. */
.mx-login-card__illustration,
.mx-verify-illustration,
.mx-picker-illustration {
    display: block;
    width: 100%;
    max-width: 210px;
    height: auto;
    margin: 0 0 var(--mx-space-3);
    /* A legacy img rule pads every image 5px at the bottom. */
    padding: 0;
}

.mx-picker-illustration {
    max-width: 160px;
}

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

/*****************************************************************/
/* Buttons — theme/components/Button.ts                           */
/*****************************************************************/

/* 52px, radius 8, 16/600, a 28px inset. white-space: nowrap keeps a label
   on one line rather than wrapping inside the fixed height. */
.mx-btn,
.btnContinue {
    font-family: var(--mx-font-family);
    height: 52px;
    padding: 0 28px;
    border-radius: var(--mx-radius-control);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-transform: none;
    letter-spacing: 0;
    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;
    transition:
        transform var(--mx-motion-lift),
        box-shadow var(--mx-motion-lift),
        background-color var(--mx-motion-state),
        border-color var(--mx-motion-state),
        color var(--mx-motion-state);
}

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

/* A full-width button's width comes from its column, not its padding — it
   keeps a 16px inset so a label like "Create Account" fits a half-width
   mobile column on one line. The deep-link panels' "Continue" keeps its
   own width. "Log in" is an asp:Button (runat=server), so its rendered id is
   AutoID-mangled — [id$="..."] matches regardless of prefix. */
.mx-btn--contained,
.mx-btn--outlined,
[id$="btnContinueExisting"] {
    width: 100%;
    padding: 0 var(--mx-space-2);
    float: none;
}

/* Primary — black with the primary-action shadow; lifts 1px under a pointer
   and presses 1px down. One per view. "Log in" (.btnContinue) is an
   asp:Button the classic stylesheets also paint, hence the !importants. */
.mx-btn--contained,
.btnContinue {
    background-color: var(--mx-color-primary) !important;
    background-image: none !important;
    color: var(--mx-color-primary-contrast) !important;
    box-shadow: var(--mx-elevation-primary);
}

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

@media (hover: hover) {
    .mx-btn--contained:hover:not(:disabled),
    .btnContinue:hover:not(:disabled) {
        transform: translateY(-1px);
    }
}

.mx-btn--contained:active:not(:disabled),
.btnContinue:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: none;
}

/* Disabled — #EBEBEB fill, #8B8B8B text, no shadow. */
.mx-btn--contained:disabled,
.btnContinue:disabled {
    background-color: var(--mx-grey-100) !important;
    color: var(--mx-grey-500) !important;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* Secondary — white on a 1px #1C1C1C edge, the ground under a pointer. */
.mx-btn--outlined {
    background: var(--mx-color-background-paper);
    border: 1px solid var(--mx-color-border-strong);
    color: var(--mx-color-text-primary);
}

.mx-btn--outlined:hover {
    background: var(--mx-color-background-default);
    border: 1px solid var(--mx-color-border-strong);
}

.mx-btn--outlined:active:not(:disabled) {
    transform: translateY(1px);
}

.mx-btn--outlined:disabled {
    background: var(--mx-color-background-paper);
    border-color: var(--mx-color-border-hairline);
    color: var(--mx-color-text-disabled);
    cursor: not-allowed;
}

/* Leading icon (Back) — MUI's startIcon: 20px, 8px before the label. */
.mx-btn--icon-left {
    gap: var(--mx-space-1);
}

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

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

/*****************************************************************/
/* The login form                                                 */
/*****************************************************************/

/* 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;
}

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

/* Each credential panel is MX's Form, left-aligned. External.css
   right-aligns .selectedBlock at >=600px, caps it at 175px and pads it
   20px, which would squeeze the fields and overlap what follows. */
.mx-login-card .selectedBlock {
    text-align: left;
    height: auto;
    padding: 0;
}

/* Controls 14px apart. Margins, not a flex gap: the server writes the
   panel's display inline (display:block / display:none) on every render. */
.mx-login-card .lbl_input.viewportCredentials,
.mx-login-card .mx-login-alert {
    margin: 0 0 14px;
}

/* 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: 52px !important;
        font-size: 16px !important;
        float: none;
    }

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

/* "Log in" sits 20px under the reset link, which is the one row without a
   margin below it. The row carries an inline style="margin-top:10px" in
   the markup (shared with the classic layout), so !important is required. */
.mx-login-card .lbl_input.viewportCredentials:has(a) {
    margin-bottom: 0;
}

.mx-login-card .viewportCredentials.mx-login-submit {
    margin-top: 20px !important;
}

/* Fields — theme/components/OutlinedInput.ts: 54px, radius 6, the #767676
   edge (4.54:1, so the boundary itself meets WCAG 1.4.11), #1C1C1C under a
   pointer. Focus is a 2px Accent edge with no glow (design review
   2026-09-29); the second pixel is an inset ring, so the text does not
   shift. Every classic-login panel shares 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: 54px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    padding: 0 var(--mx-space-2) !important;
    font-size: var(--mx-body1-size) !important;
    line-height: 20px;
    font-weight: 400;
    border: 1px solid var(--mx-color-border-field);
    border-radius: var(--mx-radius-field);
    color: var(--mx-color-text-primary);
    background-color: var(--mx-color-background-paper);
    box-shadow: none;
    transition: border-color var(--mx-motion-state), box-shadow var(--mx-motion-state);
}

/* Block, so the row is the field's 54px with no inline baseline gap under it. */
.mx-login-card .lbl_input input[type="text"],
.mx-login-card .lbl_input input[type="password"] {
    display: block;
}

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

.lbl_input input[type="text"]:focus,
.lbl_input input[type="password"]:focus {
    border-color: var(--mx-color-accent);
    box-shadow: inset 0 0 0 1px var(--mx-color-accent);
    outline: none;
}

/* iOS Safari renders the password mask glyph (●) noticeably larger than
   other characters in Rubik; Verdana gives a proportionate dot. The
   revealed text (type="text") returns to Rubik. */
.mx-login-card .lbl_input input[type="password"] {
    font-family: Verdana, sans-serif !important;
    letter-spacing: 0.0625em;
}

/* Autofill paints its own fill; repaint it white, keeping the focus ring. */
.lbl_input input:-webkit-autofill,
.lbl_input input:-webkit-autofill:hover {
    -webkit-box-shadow: inset 0 0 0 1000px var(--mx-color-background-paper);
    -webkit-text-fill-color: var(--mx-color-text-primary);
    caret-color: var(--mx-color-text-primary);
    transition: background-color 5000s ease-in-out 0s;
}

.lbl_input input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1px var(--mx-color-accent), inset 0 0 0 1000px var(--mx-color-background-paper);
}

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

.mx-login-card .viewportCredentials {
    position: relative;
}

/* The label sits permanently in the field's notch — MX's shrunk InputLabel
   (theme/components/InputLabel.ts): 12/14 regular in Supporting #414141, the
   text 17px in, centered on the top edge. The white fill and 5px side
   padding open the notch in the border, as MUI's legend does.

   MX starts the label inside an empty field and floats it up. This one
   stays put, per user request: the float depends on the browser restyling
   the label the moment the value changes, which does not happen for
   credentials the browser autofills — the label then stayed on top of the
   masked password, and attempts to detect the fill (:-webkit-autofill, an
   animationstart hook, a scripted value check) did not resolve it. With one
   position there is no state to detect. It is the position MX shows for a
   filled or focused field. */
.mx-login-card .lbl_input span.mx-field-label {
    position: absolute;
    left: 12px;
    top: 0;
    transform: translateY(-50%);
    font-family: var(--mx-font-family);
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--mx-color-text-secondary);
    background: var(--mx-color-background-paper);
    padding: 0 5px;
    pointer-events: none;
    white-space: nowrap;
}

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

/* The show/hide-password eye (#togglePassword) is overlaid inside the field
   as MX's end adornment: a 22px glyph in Body #1C1C1C, 14px in from the
   edge, on a 44px target. The markup and Scripts/javaTools.js swap Bootstrap
   eye / eye-slash SVGs (shared with the classic layout, so they stay); this
   stylesheet hides them and draws MUI's Visibility / VisibilityOff glyphs,
   keyed off the data-revealed attribute the page's click handler sets. The
   !importants override the div's inline style="...margin:auto;height:40px".
   Only the password field has the eye, so only it keeps clear of it — by id,
   so the reveal (type="text") keeps the inset and the SSN deep-link field
   (also type="password") does not take it. */
.mx-login-card .lbl_input input[id$="txtPassword"] {
    padding-right: 55px !important;
}

#togglePassword {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--mx-radius-pill);
    color: var(--mx-color-text-body);
}

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

#togglePassword svg {
    display: none;
}

#togglePassword::before {
    content: "";
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: var(--mx-glyph-visibility) center / contain no-repeat;
    mask: var(--mx-glyph-visibility) center / contain no-repeat;
}

#togglePassword[data-revealed="true"]::before {
    -webkit-mask-image: var(--mx-glyph-visibility-off);
    mask-image: var(--mx-glyph-visibility-off);
}

/* 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;
}

/* "Forgot password?" — Login.styled.ts ForgotPasswordLink: right-aligned,
   15/22 600 in Accent deep, underlined 3px below the baseline, deepening
   on hover. 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. The forgot row is the only .viewportCredentials
   holding an <a>. */
.mx-login-card .viewportCredentials:has(a) {
    text-align: right;
    font-size: var(--mx-body2-size);
    line-height: var(--mx-body2-line);
}

.mx-login-card .viewportCredentials .mx-forgot-password-link {
    display: inline !important;
}

.mx-login-card .viewportCredentials .mx-forgot-password-link,
.mx-login-card .viewportCredentials .mx-forgot-password-link b {
    font-weight: 600;
}

/* Text links — theme/components/Link.ts: 600, Accent deep (#1768E0,
   5.13:1), underlined 3px below the baseline, #0058D4 on hover. */
.mx-login-card .viewportCredentials a,
#mxRegisterLink a {
    color: var(--mx-color-accent-deep) !important;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
    transition: color var(--mx-motion-state);
}

.mx-login-card .viewportCredentials a:hover,
#mxRegisterLink a:hover {
    color: var(--mx-color-accent-hover) !important;
}

.mx-login-card .viewportCredentials a:focus-visible,
#mxRegisterLink a:focus-visible {
    outline: 2px solid var(--mx-color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* "Are you a new user? Create account HERE." — centered 15/22, 24px under
   the form, the link 700. */
#mxRegisterLink {
    margin-top: var(--mx-space-3);
    font-size: var(--mx-body2-size);
    line-height: var(--mx-body2-line);
    text-align: center;
    color: var(--mx-color-text-body);
}

#mxRegisterLink a {
    font-weight: 700;
}

/* 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;
}

/*****************************************************************/
/* Notices — theme/components/Alert.ts                            */
/*****************************************************************/

/* Radius 12, 15/22 body copy on a borderless tint with a leading 20px glyph
   pinned to the first line: the neutral Inset (the code timer), the Danger
   tint with the red cancel glyph (failures), the Success tint with the
   green check (a new code was sent).

   The text-only regions get their glyph from ::before, not markup: the
   scripts fill them with .text(), which would wipe a child icon. Each ships
   with an inline display:none, which outranks the display:flex here until
   a script shows it. */
.mx-login-alert,
.mx-verify-error,
.mx-verify-notice,
.mx-timer-pill {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border-radius: var(--mx-radius-notice);
    font-family: var(--mx-font-family);
    font-size: var(--mx-body2-size);
    line-height: var(--mx-body2-line);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--mx-color-text-body);
    text-align: left;
}

.mx-login-alert,
.mx-verify-error {
    background-color: var(--mx-color-error-extralight);
}

.mx-verify-notice {
    background-color: var(--mx-color-success-extralight);
}

.mx-timer-pill {
    background-color: var(--mx-color-background-subtle);
}

.mx-login-alert__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--mx-color-error);
}

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

.mx-verify-error::before,
.mx-verify-notice::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    background-color: var(--mx-color-error);
    -webkit-mask: var(--mx-glyph-cancel) center / contain no-repeat;
    mask: var(--mx-glyph-cancel) center / contain no-repeat;
}

.mx-verify-notice::before {
    background-color: var(--mx-color-success-edge);
    -webkit-mask-image: var(--mx-glyph-check);
    mask-image: var(--mx-glyph-check);
}

/* A region the script has emptied takes no room. */
.mx-verify-error:empty {
    display: none;
}

/* 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 disables the button and clears its 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. Disabled, the button
   takes the design system's #EBEBEB fill, so the spinner turns to its
   #8B8B8B text color. */
.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(139, 139, 139, 0.35);
    border-top-color: var(--mx-grey-500);
    border-radius: 50%;
    box-sizing: border-box;
    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 and the lifts. */
@media (prefers-reduced-motion: reduce) {
    .mx-login-submit__spinner {
        animation: none;
        opacity: 0.8;
    }

    .mx-shell *,
    .mx-shell *::before,
    .mx-shell *::after {
        transition-duration: 0.01ms !important;
    }
}

/*****************************************************************/
/* Support bar — components/Footer                                */
/*****************************************************************/

/* The shell's last child, below both halves. Mobile: the light bar on the
   ground with a hairline above. Desktop: the black bar. Phone glyph + 15px
   prompt, the number bold and underlined, never wrapping mid-value. */
.mx-support-footer {
    position: static;
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px var(--mx-space-2);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--mx-color-background-default);
    border-top: 1px solid var(--mx-color-border-panel);
    font-family: var(--mx-font-family);
    font-size: var(--mx-body2-size);
    line-height: 20px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--mx-color-text-body);
    text-align: center;
}

@media only screen and (min-width: 1024px) {
    .mx-support-footer {
        background: var(--mx-color-primary);
        border-top: 0;
        color: var(--mx-color-primary-contrast);
    }
}

.mx-support-footer svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: currentColor;
}

.mx-support-footer a {
    color: inherit !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    border-radius: 2px;
}

.mx-support-footer a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/*****************************************************************/
/* Entra multi-account chooser — pages/selectAccount              */
/*****************************************************************/

/* 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.

   Each account is the design system's selection row: a white object on the
   hairline (radius 8) that lifts 2px on hover and presses on click, the
   username 17/24 700 over the role in Supporting. */
.mx-select-account-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* The <ul> is a layout device; strip the list chrome the browser adds. */
    list-style: none;
    margin: 0;
    padding: 0;
}

.mx-account-card {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    text-align: left;
    font-family: var(--mx-font-family);
    padding: 14px;
    border: 1px solid var(--mx-color-border-hairline);
    border-radius: var(--mx-radius-control);
    background-color: var(--mx-color-background-paper);
    color: var(--mx-color-text-primary);
    box-shadow: none;
    cursor: pointer;
    transition:
        transform var(--mx-motion-lift),
        box-shadow var(--mx-motion-lift),
        border-color var(--mx-motion-state),
        background-color var(--mx-motion-state);
}

@media only screen and (min-width: 768px) {
    .mx-account-card {
        padding: 18px;
    }
}

@media (hover: hover) {
    .mx-account-card:hover:not([disabled]) {
        transform: translateY(-2px);
        box-shadow: var(--mx-elevation-hover);
        border-color: var(--mx-color-border-hover);
    }
}

.mx-account-card:active:not([disabled]) {
    transform: translateY(1px);
    box-shadow: none;
}

.mx-account-card:focus-visible {
    outline: 2px solid var(--mx-color-accent-deep);
    outline-offset: 2px;
}

/* 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's dimmed row, without its not-allowed cursor. */
.mx-account-card[disabled] {
    cursor: default;
    opacity: 0.55;
}

.mx-account-card__name {
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 0;
    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-body2-size);
    line-height: var(--mx-body2-line);
    font-weight: 400;
    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 space 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-body2-size);
    line-height: var(--mx-body2-line);
    color: var(--mx-color-text-secondary);
}

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

/* "Back to login" — the login screen's text link (Accent deep 15/600,
   underlined 3px below the baseline), centered on its own line 24px under
   the list on a 44px touch target. CMS parks a validated token in Session
   here and this is what releases it. */
.mx-select-account-back {
    align-self: center;
    min-height: 44px;
    margin-top: var(--mx-space-3);
    padding: 0 var(--mx-space-1);
    border: 0;
    background: none;
    font-family: var(--mx-font-family);
    font-size: var(--mx-body2-size);
    line-height: var(--mx-body2-line);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--mx-color-accent-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--mx-motion-state);
}

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

.mx-select-account-back:focus-visible {
    outline: 2px solid var(--mx-color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/*****************************************************************/
/* Verify Code panel — features/mfa/MfaChallenge + MfaInput       */
/*****************************************************************/

/* Controls 14px apart, as on the login form; the primary action sits 20px
   under whatever precedes it. A failure or "new code" notice leads the
   stack, above the code field, as MX's Alert does. */
.mx-verify-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Subtitle target — MX renders the address in the sentence's own weight. */
#mxVerifyCodeTarget {
    font-weight: inherit;
}

/* The label over the code boxes — 15/22 600 in Supporting, 8px above them. */
.mx-otp-field {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mx-verify-code-label {
    display: block;
    font-family: var(--mx-font-family);
    font-size: var(--mx-body2-size);
    line-height: var(--mx-body2-line);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--mx-color-text-secondary);
    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). The boxes span the form column, 8px apart, like every other
   field. */
.mx-otp-boxes {
    position: relative;
    display: flex;
    gap: var(--mx-space-1);
    width: 100%;
    cursor: text;
}

/* One digit box — the field geometry: 54px tall, radius 6, the #767676
   edge (#1C1C1C once it holds a digit), a doubled Accent edge on the active
   box (no glow, and no shift of the digit), Danger on error, and the
   read-only Inset when disabled. */
.mx-otp-box {
    flex: 1 1 0;
    min-width: 0;
    height: 54px;
    box-sizing: border-box;
    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-color-border-field);
    border-radius: var(--mx-radius-field);
    box-shadow: none;
    user-select: none;
    transition: border-color var(--mx-motion-state), box-shadow var(--mx-motion-state);
}

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

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

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

.mx-otp-boxes.mx-otp-boxes--error .mx-otp-box.mx-otp-box--focused {
    box-shadow: inset 0 0 0 1px var(--mx-color-error);
}

.mx-otp-boxes.mx-otp-boxes--disabled .mx-otp-box {
    border-color: var(--mx-color-border-hairline);
    background-color: var(--mx-color-background-subtle);
    color: var(--mx-color-text-secondary);
    box-shadow: none;
    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). */
.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;
    -webkit-text-fill-color: transparent;
    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;
}

/* "Didn't receive a code? RESEND" — right-aligned under the boxes, where the
   login form hangs its reset link; the link in the text-link style. */
.mx-verify-resend-row {
    align-self: flex-end;
    text-align: right;
    font-family: var(--mx-font-family);
    font-size: var(--mx-body2-size);
    line-height: var(--mx-body2-line);
    font-weight: 400;
    color: var(--mx-color-text-body);
}

.mx-resend-link {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--mx-color-accent-deep);
    cursor: pointer;
    transition: color var(--mx-motion-state);
}

.mx-resend-link:hover {
    color: var(--mx-color-accent-hover);
}

.mx-resend-link:focus-visible {
    outline: 2px solid var(--mx-color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

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

/* The code timer — the neutral notice (a deadline the member reads once);
   an expired code turns it into the Danger notice. Both glyphs are in the
   markup; the script toggles .mx-timer-pill--expired. */
.mx-timer-pill .mx-timer-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--mx-color-text-body);
}

.mx-timer-pill #mxVerifyCodeTimerText {
    min-width: 0;
}

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

.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;
}

/* Verify Code sits 20px under the timer. */
#mxVerifyCodeSubmit {
    margin-top: 6px;
}

/* "Use Text Message Instead" — a text link on a 44px touch target, centered
   under the actions. */
.mx-use-other-method {
    align-self: center;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--mx-space-1);
    font-family: var(--mx-font-family);
    font-size: var(--mx-body2-size);
    line-height: var(--mx-body2-line);
    font-weight: 600;
    color: var(--mx-color-accent-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--mx-motion-state);
}

.mx-use-other-method:hover {
    color: var(--mx-color-accent-hover);
}

.mx-use-other-method:focus-visible {
    outline: 2px solid var(--mx-color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/*****************************************************************/
/* Method picker panel — features/mfa/MfaMethodPicker             */
/*****************************************************************/

/* The channel switch — the design system's segmented pill: a 3px-inset
   pill on the 1px #1C1C1C edge, 54px tall like a field; the chosen channel
   is the black pill. */
.mx-method-tabs {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 3px;
    gap: 0;
    border: 1px solid var(--mx-color-border-strong);
    border-radius: var(--mx-radius-pill);
    background-color: var(--mx-color-background-paper);
}

.mx-method-tab {
    flex: 1;
    height: 46px;
    margin: 0;
    padding: 0 var(--mx-space-2);
    border: 0;
    border-radius: var(--mx-radius-pill);
    background-color: transparent;
    color: var(--mx-color-text-body);
    font-family: var(--mx-font-family);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color var(--mx-motion-state), color var(--mx-motion-state);
}

.mx-method-tab:hover {
    background-color: var(--mx-color-background-default);
}

.mx-method-tab[aria-selected="true"],
.mx-method-tab[aria-selected="true"]:hover {
    background-color: var(--mx-color-primary);
    color: var(--mx-color-primary-contrast);
}

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

.mx-method-tab:disabled {
    background-color: transparent;
    color: var(--mx-color-text-disabled);
    cursor: not-allowed;
}

/* "We will send a verification code to +1 *** *** 3425" — centered body copy,
   the target bold. The target does not break mid-value (client feedback
   2026-07-24): as an inline-block it moves to its own line whole. Only a
   target wider than the whole column breaks, rather than running past it on
   a narrow phone. */
.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-text-body);
}

.mx-method-preview strong {
    display: inline-block;
    max-width: 100%;
    font-weight: 700;
    color: var(--mx-color-text-primary);
    overflow-wrap: anywhere;
}

/* Send sits 20px under whatever precedes it — the preview, or the error
   notice when a selection fails. */
#mxMethodPickerSend {
    margin-top: 6px;
}