/*
 * Sign Up shell — Helper 3.0_Master 4453-23714 / 4496-24220.
 * Brand pane — AuthMarketingPane (brand-blue/600 + ellipses 4469-23886 / 4469-23880).
 * Footer — AuthLegalFooter 4496-24302 (same brand-blue/600, no ellipses).
 * Progress track matches Design Library 3.0 Progress bar (2075-598).
 * Step 2 form column 4496-24221 — 720×1024, centered verify stack.
 * Step 2 digit box 4566-28503 — 56×56.
 * Step 2 title 4496-24227 — 190×23, centered.
 * Step 2 lede 4496-24230 — centered instruction copy.
 * Step 2 Back 4509-28418 — text + 20×14 arrow, no outlined pill.
 * Step 2 Back icon 4509-28419 — 16×16 arrow.
 * Step 2 referral plate 4496-24571 — 720×196 brand-blue-100 band.
 * Step 2 referral intro 4496-24572 — 272×9, left-aligned.
 * Step 2 referral select — 360×40 (22.5rem), aligned to the verify stack.
 * Step 2 referral heading 4496-24579 — 202×18 H4, left-aligned.
 * Step 2 Verify email / referral Submit 4496-24565 — 105×40 hug.
 * Step 2 resend line 4496-24570 — 217×13, centered.
 */

html:has(.signup-shell),
body:has(.signup-shell),
#app:has(.signup-shell) {
    --mud-palette-background: var(--color-brand-blue-50);
    --tops-background: var(--color-brand-blue-50);
    background-color: var(--color-brand-blue-50) !important;
    height: 100%;
    overflow: hidden;
}

.signup-shell {
    --mud-palette-background: var(--color-brand-blue-50);
    background-color: var(--color-brand-blue-50) !important;
    display: grid;
    grid-template-columns: minmax(20rem, 1fr) minmax(24rem, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.signup-shell > .signup-shell-brand {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow: hidden;
}

.signup-shell-form {
    background-color: var(--color-brand-blue-50) !important;
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--spacing-6) var(--spacing-8) var(--spacing-8);
    position: relative;
    z-index: 1;
}

/* Referral band stays pinned to the bottom of the right pane; the form above it scrolls. */
.signup-shell:has(.signup-referral-survey) .signup-shell-form {
    overflow: hidden;
    padding-bottom: 0;
}

.signup-shell:has(.signup-referral-survey) .signup-shell-form-slot,
.signup-shell:has(.signup-referral-survey) .signup-flow,
.signup-shell:has(.signup-referral-survey) .signup-step-card--verify {
    display: contents;
}

.signup-shell:has(.signup-referral-survey) .signup-verify-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    width: 100%;
}

.signup-shell:has(.signup-referral-survey) .signup-shell-form-inner {
    align-items: center;
    flex: 1 1 auto;
    justify-content: flex-start;
    margin-inline: auto;
    max-width: none;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 196px;
}

.signup-shell:has(.signup-step-card--verify) .signup-shell-form-inner {
    align-items: center;
    margin-inline: auto;
    max-width: none;
    text-align: center;
    width: 100%;
}

/* 4496-26069 — progress track spans the form column, not a 17.5rem stub. */
.signup-verify-back-top {
    align-self: flex-start;
    margin-bottom: 0.75rem;
}

.signup-shell:has(.signup-step-card--recovery) .signup-progress,
.signup-shell:has(.signup-step-card--profile) .signup-progress {
    margin-top: 1rem;
}

.signup-shell:has(.signup-step-card--verify) .signup-progress {
    justify-content: center;
    margin-inline: auto;
    margin-top: 1rem;
    max-width: none;
    width: 100%;
}

.signup-shell:has(.signup-step-card--verify) .signup-progress-label {
    text-align: center;
    width: max-content;
}

.signup-shell:has(.signup-step-card--verify) .signup-shell-form-slot {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
}

.signup-shell:has(.signup-step-card--verify) .login-form-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
}

.signup-shell > .signup-shell-footer {
    grid-column: 1 / -1;
    grid-row: 2;
}

.signup-shell-form-toolbar {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-4);
}

/* Tabs stay pinned to the top of the form column on every auth screen. */
.auth-mode-tabs-row {
    align-self: center;
    flex: 0 0 auto;
    margin-inline: auto;
    max-width: 33.5rem;
    width: 100%;
}

/* Figma 5189-33636 — Sign In / Sign Up tabs, same row on every auth screen. */
.signup-auth-tabs {
    align-self: flex-start;
    display: inline-flex;
    gap: 0;
}

.signup-auth-tab {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    font-family: var(--tops-body-font);
    font-size: var(--tops-body-size);
    font-weight: var(--font-weight-semibold);
    height: 40px;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1.6;
    min-width: 93px;
    padding: 8px 12px 0;
    text-decoration: none;
}

.signup-auth-tab--active {
    border-bottom: 2px solid var(--color-brand-blue-600);
    color: var(--color-brand-blue-600);
}

.signup-auth-tab--inactive {
    border-bottom: 2px solid transparent;
    color: var(--color-stormy-grey-400);
}

.signup-auth-tab--inactive:hover,
.signup-auth-tab--inactive:focus-visible {
    color: var(--color-brand-blue-600);
}

/* 4496-24856 — centered column, left-flushed copy inside it. */
.signup-shell-form-inner {
    align-self: center;
    background-color: var(--color-brand-blue-50) !important;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    margin-inline: auto;
    max-width: 33.5rem;
    padding-block: var(--spacing-6);
    text-align: left;
    width: 100%;
}

.signup-progress {
    display: flex;
    gap: 8px;
}

.signup-progress-segment {
    background-color: var(--color-misty-grey-400);
    border-radius: 999px;
    flex: 1 1 0;
    height: 3px;
}

.signup-progress-segment[data-state="complete"],
.signup-progress-segment[data-state="active"] {
    background-color: var(--color-brand-blue-600);
}

.signup-progress-label {
    color: var(--color-brand-blue-500);
    font-family: var(--tops-body-font);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.44px;
    line-height: 1.2;
    margin: 14px 0 0;
    text-transform: uppercase;
}

/* Sit the step label under the active segment, not the middle of the track. */
.signup-shell:has([data-cy="signup-progress-segment"][data-state="active"]) .signup-progress-label {
    --signup-step: 1;
    --signup-step-count: 5;
    align-self: flex-start;
    margin-left: calc(
        (var(--signup-step) - 0.5) * (100% - (var(--signup-step-count) - 1) * 8px) / var(--signup-step-count)
        + (var(--signup-step) - 1) * 8px
    );
    text-align: center;
    transform: translateX(-50%);
    width: max-content;
}

.signup-shell:has([data-cy="signup-progress-segment"][data-step="1"][data-state="active"]) .signup-progress-label { --signup-step: 1; }
.signup-shell:has([data-cy="signup-progress-segment"][data-step="2"][data-state="active"]) .signup-progress-label { --signup-step: 2; }
.signup-shell:has([data-cy="signup-progress-segment"][data-step="3"][data-state="active"]) .signup-progress-label { --signup-step: 3; }
.signup-shell:has([data-cy="signup-progress-segment"][data-step="4"][data-state="active"]) .signup-progress-label { --signup-step: 4; }
.signup-shell:has([data-cy="signup-progress-segment"][data-step="5"][data-state="active"]) .signup-progress-label { --signup-step: 5; }

.recovery-pin-error {
    color: var(--color-alerts-red-600);
    font-family: var(--tops-body-font);
    font-size: var(--font-size-xs);
    line-height: 1.3;
    margin: 0.25rem 0 0;
}

.signup-shell-form-slot {
    background-color: var(--color-brand-blue-50) !important;
    margin-top: var(--spacing-6);
    width: 100%;
}

/* 4462-23717 — stacked labels sit on the pane; only the outlined box is white. */
.signup-shell .mud-input-control,
.signup-shell .mud-input-control-input-container,
.signup-shell .mud-input-label {
    background-color: transparent !important;
}

.signup-shell .mud-input-control:not(.signup-digit-box) .mud-input.mud-input-outlined,
.signup-shell .mud-input-control:not(.signup-digit-box) .mud-select .mud-input.mud-input-outlined {
    background-color: var(--tops-input-bg) !important;
}

.signup-shell .mud-input-control:not(.signup-digit-box) .mud-input.mud-input-outlined input.mud-input-slot,
.signup-shell .mud-input-control:not(.signup-digit-box) .mud-input.mud-input-outlined textarea.mud-input-slot,
.signup-shell .mud-input-control:not(.signup-digit-box) .mud-input.mud-input-outlined .mud-select-input {
    background-color: var(--tops-input-bg) !important;
}

.signup-shell .login-form-content,
.signup-shell .signup-flow,
.signup-shell .signup-step-card,
.signup-shell .signup-flow .signup-step-card {
    background-color: var(--color-brand-blue-50) !important;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.signup-shell .signup-step-label {
    display: none;
}

.signup-shell .signup-step-title {
    color: var(--color-brand-blue-700);
    font-family: var(--tops-h2-font, var(--tops-h1-font));
    font-size: var(--tops-h2-size);
    font-weight: var(--tops-h2-weight, var(--tops-h1-weight));
    letter-spacing: var(--tops-h2-spacing, 0);
    line-height: var(--tops-h2-line, 1.3);
    margin: 0 0 var(--spacing-3);
}

.signup-shell .auth-page-title {
    font-size: var(--font-size-2xl);
    line-height: 1.2;
}

.signup-shell .signup-step-description {
    color: var(--color-stormy-grey-700);
    font-family: var(--tops-body-font);
    font-size: var(--tops-body-sm-size);
    font-weight: var(--tops-body-sm-weight, 400);
    letter-spacing: var(--tops-body-sm-spacing, 0);
    line-height: var(--tops-body-sm-line, 1.5);
    margin: 0 0 var(--spacing-6);
}

/* Figma step-1 inputs — medium labels, stormy-grey/200 borders (#c7c6ca). */
.signup-shell .mud-input-control:not(.signup-digit-box) .mud-input-label,
.signup-shell .mud-input-control:not(.signup-digit-box) .mud-input-label.mud-input-label-inputcontrol {
    font-weight: var(--font-weight-medium) !important;
}

/* AT-66 AC-4487 / AC-493 — required asterisks red on first load (MudBlazor ::after when Required=true). */
.signup-shell .signup-step-card .mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    color: var(--color-alerts-red-400);
}

.signup-shell .mud-input-control:not(.signup-digit-box) .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--color-stormy-grey-200);
}

.signup-company-name-field {
    position: relative;
}

.signup-company-name-field .mud-input-slot {
    padding-right: 2rem;
}

.signup-shell .signup-company-name-info.mud-tooltip-inline {
    display: inline-flex;
    position: absolute;
    right: var(--spacing-2);
    top: calc(var(--tops-label-helper-line) + 6px + (var(--tops-input-height) - 14px) / 2);
    width: auto;
}

.signup-company-name-info-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-stormy-grey-500);
    cursor: pointer;
    display: inline-flex;
    height: 14px;
    justify-content: center;
    padding: 0;
    width: 14px;
}

.signup-company-name-info-button .mud-icon-root {
    font-size: 14px;
    height: 14px;
    width: 14px;
}

.mud-popover.mud-tooltip.signup-company-name-tooltip {
    background-color: var(--color-brand-blue-500);
    border-radius: 2px;
    color: var(--color-white-100);
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.4;
    max-width: min(220px, calc(100vw - 2rem));
    overflow-wrap: break-word;
    padding: var(--spacing-2) var(--spacing-3);
    text-align: center;
    translate: calc(-50% + 14px) 0;
    white-space: normal;
    width: min(220px, calc(100vw - 2rem));
}

.mud-popover.mud-tooltip.signup-company-name-tooltip.mud-tooltip-arrow::after {
    left: auto;
    right: 10px;
    translate: none;
}

.mud-popover.mud-tooltip.signup-company-name-tooltip .mud-tooltip-arrow {
    color: var(--color-brand-blue-500);
}

.signup-step-card--verify {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.signup-verify-main {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    text-align: center;
    width: min(100%, 26rem);
}

.signup-shell .signup-verify-main .signup-step-title {
    font-size: var(--tops-h2-size);
    letter-spacing: var(--tops-h2-spacing);
    line-height: var(--tops-h2-line);
    margin: 0 0 var(--spacing-2);
    text-align: center;
    width: 100%;
}

.signup-shell .signup-verify-main .signup-step-title.auth-page-title {
    font-size: var(--font-size-2xl);
    line-height: 1.2;
}

.signup-shell .signup-verify-main .signup-step-description {
    font-size: var(--tops-body-md-size);
    line-height: var(--tops-body-md-line);
    margin: 0 0 var(--spacing-4);
    max-width: 20rem;
    text-align: center;
    width: 100%;
}

.signup-step3-form {
    text-align: left;
    width: 100%;
}

.signup-name-row {
    display: grid;
    gap: var(--spacing-4);
    grid-template-columns: 1fr 1fr;
}

.signup-digit-row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-4);
    justify-content: center;
    margin-bottom: var(--spacing-8, 2rem);
}

.signup-shell .signup-digit-row .signup-digit-box.mud-input-control {
    flex: 0 0 56px;
    margin: 0;
    max-width: 56px;
    min-width: 0;
    width: 56px;
}

/* Digit boxes stay white; clip the fill to the radius so it cannot leak as a square. */
.signup-shell .signup-digit-row .signup-digit-box,
.signup-shell .signup-digit-row .signup-digit-box .mud-input-control-input-container,
.signup-shell .signup-digit-row .signup-digit-box .mud-input.mud-input-outlined {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.signup-shell .signup-digit-row .signup-digit-box .mud-input.mud-input-outlined,
.signup-shell .signup-digit-row .signup-digit-box .mud-input.mud-input-outlined input.mud-input-slot {
    background-color: var(--tops-input-bg) !important;
    border-radius: var(--radius-lg);
    height: 56px;
}

.signup-shell .signup-digit-row .signup-digit-box .mud-input-outlined-border {
    background-color: transparent;
    border-color: var(--color-misty-grey-200);
    border-radius: var(--radius-lg);
    border-width: 1px;
}

.signup-shell .signup-digit-row .signup-digit-box .mud-input-slot {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    height: 56px;
    padding: 0;
    text-align: center;
}

.signup-verify-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    justify-content: center;
    margin-bottom: var(--spacing-3);
}

.signup-shell .signup-verify-submit.mud-button-root,
.signup-shell [data-cy="signup-verify-email"].mud-button-root,
.signup-shell [data-cy="signup-step3-continue"].mud-button-root {
    height: var(--tops-btn-min-height);
    min-height: var(--tops-btn-min-height);
    min-width: 105px;
    padding-inline: var(--tops-btn-padding-x);
    width: auto;
}

/* 4509-28418 — text Back (arrow + label). Flatten outlined chrome on stale WASM. */
.signup-shell .signup-verify-back.mud-button-root,
.signup-shell [data-cy="signup-verify-back"].mud-button-root,
.signup-shell [data-cy="signup-step3-go-back"].mud-button-root {
    background-color: transparent;
    border: 0;
    border-radius: var(--tops-btn-radius);
    box-shadow: none;
    color: var(--color-brand-blue-600);
    font-size: var(--tops-body-sm-size);
    height: auto;
    letter-spacing: var(--tops-body-sm-spacing);
    line-height: 1.2;
    min-height: 0;
    min-width: 0;
    padding: 4px 8px;
    width: auto;
}

.signup-shell [data-cy="signup-verify-back"].mud-button-root:hover,
.signup-shell [data-cy="signup-verify-back"].mud-button-root:focus-visible,
.signup-shell [data-cy="signup-step3-go-back"].mud-button-root:hover,
.signup-shell [data-cy="signup-step3-go-back"].mud-button-root:focus-visible {
    background-color: var(--tops-btn-text-hover-bg);
    border: 0;
    color: var(--tops-btn-text-hover-color);
}

.signup-shell .signup-verify-back .mud-button-label,
.signup-shell [data-cy="signup-verify-back"] .mud-button-label {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

.signup-shell .signup-verify-back .mud-button-icon-start,
.signup-shell [data-cy="signup-verify-back"] .mud-button-icon-start {
    margin-inline-end: 0;
}

.signup-shell .signup-verify-back .mud-icon-root,
.signup-shell [data-cy="signup-verify-back"] .mud-icon-root {
    font-size: 14px;
    height: 14px;
    width: 14px;
}

.signup-shell [data-cy="signup-verify-back"]:not(:has(.mud-button-icon-start)) .mud-button-label::before {
    background-color: currentColor;
    content: "";
    display: inline-block;
    flex: 0 0 14px;
    height: 14px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/></svg>");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 14px 14px;
    mask-size: 14px 14px;
    width: 14px;
}

.signup-step-card--verify .signup-signin-prompt {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
}

.signup-resend-prompt {
    align-items: center;
    color: var(--color-stormy-grey-700);
    display: flex;
    flex-wrap: nowrap;
    font-family: var(--tops-body-font);
    font-size: var(--tops-body-sm-size);
    font-weight: var(--tops-body-sm-weight);
    gap: var(--spacing-2);
    justify-content: center;
    letter-spacing: var(--tops-body-sm-spacing);
    line-height: var(--tops-body-sm-line);
    margin: var(--spacing-4) auto 0;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

.signup-shell .signup-resend-button.mud-button-root {
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 4px 8px;
    width: auto;
}

.signup-resend-prompt a {
    color: var(--color-brand-blue-600);
    font-weight: var(--tops-link-weight);
    text-decoration: none;
}

.signup-resend-prompt a:hover,
.signup-resend-prompt a:focus-visible {
    text-decoration: underline;
}

.signup-referral-survey {
    align-items: center;
    background-color: var(--color-brand-blue-100) !important;
    bottom: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    left: 0;
    margin: 0;
    min-height: 196px;
    padding: var(--spacing-8) var(--spacing-8);
    position: absolute;
    right: 0;
}

.signup-referral-survey-inner {
    max-width: 30.0625rem;
    text-align: left;
    width: 100%;
}

.signup-referral-intro {
    color: var(--color-stormy-grey-700);
    font-family: var(--tops-body-font);
    font-size: var(--tops-body-sm-size);
    line-height: var(--tops-body-sm-line);
    margin: 0 0 var(--spacing-2);
    text-align: left;
}

.signup-referral-heading {
    color: var(--color-brand-blue-700);
    font-family: var(--tops-h4-font);
    font-size: var(--tops-h4-size);
    font-weight: var(--tops-h4-weight);
    letter-spacing: var(--tops-h4-spacing);
    line-height: var(--tops-h4-line);
    margin: 0 0 var(--spacing-3);
    text-align: left;
}

.signup-referral-row {
    align-items: center;
    display: grid;
    gap: var(--spacing-4);
    grid-template-columns: 22.5rem auto;
}

.signup-shell .signup-referral-survey .signup-referral-select.mud-input-control {
    margin: 0;
    max-width: 100%;
    min-width: 0;
    width: 22.5rem;
}

.signup-shell .signup-referral-survey .signup-referral-select .mud-input.mud-input-outlined {
    background-color: var(--color-white-100);
    min-height: 40px;
}

/* Open list matches My Account activity menus (white card, navy rows, blue hover).
   The list itself scrolls so the menu can stay on screen. */
.mud-popover.signup-referral-menu {
    background: var(--color-white-100) !important;
    border: 1px solid var(--color-misty-grey-300) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
    margin-top: 6px;
    max-height: none !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.mud-popover.signup-referral-menu .mud-list {
    background: var(--color-white-100) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-height: min(320px, calc(100vh - 8rem)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 0 !important;
}

.mud-popover.signup-referral-menu .mud-list-item {
    align-items: center;
    border-radius: 0 !important;
    box-sizing: border-box;
    color: var(--color-brand-blue-600) !important;
    display: flex;
    font-family: var(--tops-body-font);
    font-size: 14px;
    font-weight: 400;
    height: 40px;
    justify-content: flex-start;
    line-height: 1.4;
    margin: 0;
    min-height: 40px;
    padding: 0 12px;
    position: relative;
}

.mud-popover.signup-referral-menu .mud-list-item + .mud-list-item::before {
    background: var(--color-misty-grey-300);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.mud-popover.signup-referral-menu .mud-list-item-text,
.mud-popover.signup-referral-menu .mud-list-item-text .mud-typography {
    color: var(--color-brand-blue-600) !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

.mud-popover.signup-referral-menu .mud-list-item .mud-list-item-icon {
    display: none;
}

.mud-popover.signup-referral-menu.signup-company-type-menu {
    max-width: calc(100vw - 2rem) !important;
    min-width: 16rem !important;
    width: max-content !important;
}

.mud-popover.signup-referral-menu.signup-company-type-menu .mud-list {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    min-width: max-content;
    width: 100%;
}

.mud-popover.signup-referral-menu.signup-company-type-menu .mud-list-item {
    align-self: stretch;
    box-sizing: border-box;
    white-space: nowrap;
    width: auto;
}

.mud-popover.signup-referral-menu .mud-list-item:hover,
.mud-popover.signup-referral-menu .mud-list-item.mud-selected-item,
.mud-popover.signup-referral-menu .mud-list-item.mud-selected-item:hover {
    background-color: var(--color-brand-blue-100) !important;
    color: var(--color-brand-blue-600) !important;
    font-weight: 400;
}

.signup-shell .signup-referral-submit.mud-button-root {
    min-width: 105px;
    width: auto;
}

.signup-referral-other {
    margin-top: var(--spacing-4);
}

.signup-shell .signup-primary-btn.mud-button-root,
.signup-shell .auth-submit-btn.mud-button-root {
    min-width: 11.875rem;
    width: auto;
}

.signup-shell [data-cy="signup-verify-email"].mud-button-root {
    min-width: 105px;
    width: auto;
}

.signup-signin-prompt {
    border-top: 1px solid var(--color-misty-grey-300);
    color: var(--color-stormy-grey-700);
    font-family: var(--tops-body-font);
    font-size: var(--tops-body-md-size);
    line-height: var(--tops-body-md-line);
    margin: var(--spacing-8) 0 0;
    padding-top: var(--spacing-6);
    width: 100%;
}

.signup-signin-prompt a {
    color: var(--color-brand-blue-600);
    font-weight: var(--tops-link-weight);
    text-decoration: none;
}

.signup-signin-prompt a:hover,
.signup-signin-prompt a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 59.99rem) {
    .signup-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .signup-shell-brand,
    .signup-shell-form {
        grid-column: 1;
    }

    .signup-shell-brand {
        min-height: auto;
    }

    .signup-shell-form {
        grid-row: 2;
        min-height: 0;
    }

    .signup-shell-footer {
        grid-row: 3;
    }

    .signup-shell-form-inner {
        justify-content: flex-start;
    }

    .signup-shell-form-toolbar {
        flex-wrap: wrap;
    }

    .signup-name-row,
    .signup-referral-row {
        grid-template-columns: 1fr;
    }

    .signup-shell .signup-referral-survey .signup-referral-select.mud-input-control {
        width: 100%;
    }

    .signup-shell:has(.signup-referral-survey) .signup-shell-form-inner {
        padding-bottom: 0;
    }

    .signup-referral-survey {
        margin-inline: calc(-1 * var(--spacing-8));
        margin-top: var(--spacing-8);
        position: static;
    }

    .signup-resend-prompt {
        white-space: normal;
    }
}

/* ── Step 3 MFA method tile selectors (Figma 4496-24855) ── */
.signup-shell:has([data-cy="signup-step3-setup"]) .signup-verify-main {
    width: min(100%, 36rem);
}

.signup-shell:has([data-cy="signup-step3-setup"]) .signup-verify-main .signup-step-title,
.signup-shell:has([data-cy="signup-step3-setup"]) .signup-verify-main .signup-step-description {
    max-width: none;
    width: 100%;
}

.signup-shell:has([data-cy="signup-step3-setup"]) .signup-verify-actions {
    margin-top: 1.25rem;
}

.mfa-method-tiles {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    width: 100%;
}

/* MudButton tiles. Equal width, with room between the icon and the label. */
.mfa-method-tile.mud-button-root {
    align-items: center;
    appearance: none;
    background: var(--color-white-100) !important;
    border: 1.5px solid var(--color-misty-grey-300) !important;
    border-radius: var(--radius-lg) !important;
    cursor: pointer;
    display: inline-flex;
    flex: 1 1 0;
    gap: 0.875rem;
    justify-content: flex-start;
    min-height: 0;
    min-width: 0;
    padding: var(--spacing-3) 1.125rem !important;
    text-transform: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: auto;
}

.mfa-method-tile.mud-button-root .mud-button-label {
    gap: 0.875rem;
    justify-content: flex-start;
    width: 100%;
}

.mfa-method-tile.mud-button-root:hover {
    background: var(--color-white-100) !important;
    border-color: var(--color-brand-blue-400) !important;
}

.mfa-method-tile--selected.mud-button-root {
    background: var(--color-white-100) !important;
    border-color: var(--color-brand-blue-600) !important;
    box-shadow: 0 0 0 1px var(--color-brand-blue-600);
}

.mfa-method-tile__icon {
    color: var(--color-brand-blue-600);
    flex: 0 0 auto;
    font-size: 1.25rem !important;
    height: 1.25rem;
    margin: 0;
    width: 1.25rem;
}

.mfa-method-tile__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.mfa-method-tile__label {
    color: var(--color-brand-blue-700);
    font-family: var(--tops-body-font);
    font-size: var(--tops-body-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--tops-body-line);
}

.mfa-method-tile__subtitle {
    color: var(--color-stormy-grey-500);
    font-family: var(--tops-body-font);
    font-size: var(--tops-body-sm-size);
    line-height: var(--tops-body-sm-line);
}

/* Step 3 secure hint — underlined emphasis */
.signup-step3-secure-hint {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Step 3 back link */
.signup-back-link {
    align-items: center;
    color: var(--color-brand-blue-600);
    display: inline-flex;
    font-family: var(--tops-body-font);
    font-size: var(--tops-body-size);
    font-weight: var(--font-weight-medium);
    gap: 4px;
    line-height: 1.2;
    text-decoration: none;
}

.signup-back-link:hover,
.signup-back-link:focus-visible {
    text-decoration: underline;
}

.signup-back-link__icon {
    font-size: 16px !important;
    height: 16px;
    width: 16px;
}

/* Figma 4496-26265 / 4496-26513 / 4496-26573 — signup recovery, no instrument cards.
 * Form column is brand-blue/50; each recovery section is a blue-100 card.
 */
.signup-shell:has(.signup-step-card--recovery) .signup-shell-form-inner,
.signup-shell:has(.signup-step-card--recovery) .auth-mode-tabs-row {
    max-width: 36rem;
}

/* Back and the step track stay in the step 3 rhythm, dropped a little lower. The form under them has more air. */
.signup-shell:has(.signup-step-card--recovery) .signup-shell-form,
.signup-shell:has(.signup-step-card--profile) .signup-shell-form {
    padding-bottom: 1rem;
    padding-top: var(--spacing-8);
}

.signup-shell:has(.signup-step-card--recovery) .signup-shell-form-inner,
.signup-shell:has(.signup-step-card--profile) .signup-shell-form-inner {
    padding-bottom: 0.5rem;
    padding-top: var(--spacing-8);
}

.signup-shell:has(.signup-step-card--recovery) .signup-shell-form-slot,
.signup-shell:has(.signup-step-card--profile) .signup-shell-form-slot {
    margin-top: 1.5rem;
}

.signup-shell:has(.signup-step-card--profile) .signup-shell-form-slot {
    margin-top: 5.5rem;
}

.signup-shell:has(.signup-step-card--recovery) .signup-step-title {
    font-size: var(--tops-h3-size);
    line-height: var(--tops-h3-line);
    margin-bottom: 0.75rem;
}

.signup-shell:has(.signup-step-card--recovery) .signup-step-description {
    font-size: var(--tops-body-xs-size);
    line-height: var(--tops-body-xs-line);
    margin-bottom: 1rem;
}

.signup-shell:has(.signup-step-card--recovery) .signup-signin-prompt,
.signup-shell:has(.signup-step-card--profile) .signup-signin-prompt {
    margin-top: 1.25rem;
    padding-top: 1rem;
}

.signup-shell:has(.signup-step-card--profile) .signup-signin-prompt {
    margin-top: 2.5rem;
}

.signup-shell:has(.signup-step-card--recovery) .signup-shell-form,
.signup-shell:has(.signup-step-card--recovery) .signup-shell-form-inner,
.signup-shell:has(.signup-step-card--recovery) .signup-shell-form-slot,
.signup-shell:has(.signup-step-card--recovery) .login-form-content,
.signup-shell:has(.signup-step-card--recovery) .signup-step-card {
    background-color: var(--color-brand-blue-50) !important;
}

.signup-recovery-section {
    background-color: var(--color-brand-blue-100);
    border-radius: var(--radius-lg);
    margin: 0 0 1rem;
    padding: 1rem 1rem 0.875rem;
    position: relative;
    z-index: 2;
}

/* Ensure inputs inside recovery sections are fully clickable */
.signup-shell .signup-recovery-section input,
.signup-shell .signup-recovery-section .mud-input-control,
.signup-shell .signup-recovery-section .mud-input-slot {
    pointer-events: auto;
    position: relative;
    z-index: 3;
}

/* Input boxes inside recovery sections use the design-library outlined field (1331-509). */
.signup-shell .signup-recovery-section .mud-input-control,
.signup-shell .signup-recovery-section .mud-input-control-input-container {
    background-color: transparent !important;
}

.signup-shell .signup-recovery-section .mud-input-control:not(.mud-input-error) .mud-input-label.mud-input-label-inputcontrol,
.signup-shell .signup-recovery-section .mud-input-control:not(.mud-input-error) label.mud-input-label,
.signup-shell .signup-step-card--profile .mud-input-control:not(.mud-input-error):not(.mud-input-control-boolean-input) .mud-input-label.mud-input-label-inputcontrol,
.signup-shell .signup-step-card--profile .mud-input-control:not(.mud-input-error):not(.mud-input-control-boolean-input) label.mud-input-label {
    background-color: transparent !important;
    color: var(--tops-brand-600) !important;
    font-size: var(--tops-label-helper-size) !important;
    font-weight: var(--tops-label-helper-weight) !important;
    line-height: var(--tops-label-helper-line) !important;
}

.signup-shell .signup-recovery-section .signup-dl-field.mud-input-control:not(.signup-dl-field--optional) > .mud-input-control-input-container > .mud-input-label::after,
.signup-shell .signup-recovery-section .signup-dl-field.mud-input-control:not(.signup-dl-field--optional) .mud-input-label-text::after {
    color: var(--color-alerts-red-400);
    content: "\00a0*";
}

.signup-shell .signup-recovery-section .mud-input-control .mud-input-outlined .mud-input-outlined-border,
.signup-shell .signup-step-card--profile .mud-input-control .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--tops-input-border-default);
    border-radius: var(--tops-input-radius);
    border-width: var(--tops-input-stroke-width);
}

.signup-shell .signup-recovery-section .mud-input-slot::placeholder,
.signup-shell .signup-step-card--profile .mud-input-slot::placeholder {
    color: var(--tops-gray-400);
}

.signup-shell .signup-recovery-section .mud-input.mud-input-outlined,
.signup-shell .signup-recovery-section .mud-input-control .mud-input.mud-input-outlined,
.signup-shell .signup-recovery-section .mud-input-outlined-border {
    background-color: var(--color-white-100) !important;
}

.signup-shell .signup-recovery-section .mud-input.mud-input-outlined input.mud-input-slot,
.signup-shell .signup-recovery-section .mud-input.mud-input-outlined textarea.mud-input-slot,
.signup-shell .signup-recovery-section .mud-input.mud-input-outlined .mud-select-input,
.signup-shell .signup-recovery-section input.mud-input-slot,
.signup-shell .signup-recovery-section textarea.mud-input-slot {
    background-color: var(--color-white-100) !important;
}

.signup-recovery-heading {
    color: var(--color-brand-blue-700);
    font-family: var(--tops-h4-font);
    font-size: var(--tops-body-size);
    font-weight: 700;
    letter-spacing: var(--tops-h4-spacing);
    line-height: var(--tops-body-line);
    margin: 0 0 0.5rem;
}

.signup-recovery-helper {
    color: var(--color-stormy-grey-700);
    font-family: var(--tops-body-font);
    font-size: var(--tops-body-sm-size);
    line-height: var(--tops-body-sm-line);
    margin: 0 0 0.75rem;
}

.signup-recovery-helper-emphasis {
    font-weight: 600;
}

.signup-shell .signup-recovery-pin-fields {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr 1fr;
}

.signup-shell .signup-recovery-backup-fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Figma 4496-26597 / 4496-26599 — two adjacent pill buttons (SMS | Email) */
.signup-shell .signup-recovery-backup-toggle.mud-toggle-group {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    gap: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    width: auto !important;
}

.signup-shell .signup-recovery-backup-toggle .mud-toggle-item {
    background-color: var(--color-white-100) !important;
    border: 1px solid var(--color-misty-grey-300) !important;
    border-radius: 20px !important;
    color: var(--color-brand-blue-700) !important;
    font-weight: 500 !important;
    min-height: 2.5rem !important;
    min-width: 6rem !important;
    padding: 0 2.5rem !important;
}

/* First button: round left, flat right */
.signup-shell .signup-recovery-backup-toggle .mud-toggle-item:first-child {
    border-radius: 20px 0 0 20px !important;
    border-right: 0 !important;
}

/* Last button: flat left, round right */
.signup-shell .signup-recovery-backup-toggle .mud-toggle-item:last-child {
    border-radius: 0 20px 20px 0 !important;
}

.signup-shell .signup-recovery-backup-toggle .mud-toggle-item-selected,
.signup-shell .signup-recovery-backup-toggle .mud-toggle-item.mud-selected {
    background-color: var(--color-brand-blue-600) !important;
    border-color: var(--color-brand-blue-600) !important;
    color: var(--color-white-100) !important;
}

@media (max-width: 59.99rem) {
    .signup-shell .signup-recovery-pin-fields {
        grid-template-columns: 1fr;
    }
}

/* Figma 4496-26597 / 4496-26599 — recovery page action row */
.signup-shell:has(.signup-step-card--recovery) .signup-actions-row {
    align-items: center;
    display: flex;
    gap: var(--spacing-4);
    justify-content: flex-start;
    margin-top: 0.5rem;
    padding-top: 0.25rem;
}

.signup-shell:has(.signup-step-card--recovery) .signup-back-link {
    color: var(--color-brand-blue-700);
    font-size: var(--tops-body-size);
    font-weight: 500;
}

.signup-shell:has(.signup-step-card--recovery) .signup-primary-btn.mud-button-root {
    min-width: 10rem;
}

/* Figma 4496-26905 — Step 5 Complete Profile (brand-blue/50 form area, like recovery) */
.signup-shell:has(.signup-step-card--profile) .signup-shell-form,
.signup-shell:has(.signup-step-card--profile) .signup-shell-form-inner,
.signup-shell:has(.signup-step-card--profile) .signup-shell-form-slot,
.signup-shell:has(.signup-step-card--profile) .login-form-content,
.signup-shell:has(.signup-step-card--profile) .signup-step-card {
    background-color: var(--color-brand-blue-50) !important;
}

.signup-shell:has(.signup-step-card--profile) .signup-shell-form-inner,
.signup-shell:has(.signup-step-card--profile) .auth-mode-tabs-row {
    max-width: 36rem;
}

/* Step 5 Terms checkbox — asterisk in red */
.signup-shell .signup-terms-required {
    color: var(--color-alerts-red-400);
    font-weight: 600;
}

.signup-shell .signup-terms-link {
    color: var(--color-brand-blue-600);
    font-weight: 500;
    text-decoration: underline;
}

.signup-shell:has(.signup-session-expired) .signup-shell-form-inner {
    align-items: center;
    margin-inline: auto;
    max-width: none;
    text-align: center;
    width: 100%;
}

.signup-shell:has(.signup-session-expired) .signup-verify-back-top {
    margin-bottom: 0.75rem;
}

.signup-shell:has(.signup-session-expired) .signup-progress {
    justify-content: center;
    margin-inline: auto;
    margin-top: 0;
    max-width: none;
    padding-top: 1.75rem;
    width: 100%;
}

.signup-shell:has(.signup-session-expired) .signup-progress-label {
    text-align: center;
    width: max-content;
}

.signup-shell:has(.signup-session-expired) .signup-shell-form-slot {
    text-align: center;
    width: 100%;
}

.signup-shell:has(.signup-session-expired) .signup-shell-form-slot {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
}

.signup-shell .signup-session-expired {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    text-align: center;
    width: min(100%, 26rem);
}

.signup-shell .signup-session-expired .signup-step-title {
    margin-bottom: var(--spacing-2);
    text-align: center;
    width: 100%;
}

.signup-shell .signup-session-expired .signup-step-description {
    margin-bottom: var(--spacing-4);
    max-width: 20rem;
    text-align: center;
}

.signup-shell .signup-session-expired .forgot-password-actions {
    justify-content: center;
    margin-top: 0;
    width: auto;
}

.signup-shell .signup-session-expired-links {
    margin: var(--spacing-3) 0 0;
}

.signup-shell .signup-session-expired-links a {
    color: var(--color-brand-blue-600);
    font-weight: var(--font-weight-medium, 500);
    text-decoration: none;
}

.signup-shell .signup-session-expired-links a:hover,
.signup-shell .signup-session-expired-links a:focus-visible {
    text-decoration: underline;
}

.signup-shell .signup-terms-link:hover,
.signup-shell .signup-terms-link:focus-visible {
    color: var(--color-brand-blue-700);
}

/* Step 5 checkboxes use AdamsTaxCheckBox (same 14px box as the issuer page). */
.signup-shell .signup-step-card--profile .adamstax-checkbox {
    align-items: center;
    display: flex;
}

.signup-shell .signup-step-card--profile .signup-terms-checkbox {
    margin-top: 0.75rem;
}

.signup-shell .signup-terms-error {
    color: var(--mud-palette-error);
    font-size: 0.75rem;
    line-height: 1.66;
    margin: 0 0 0.5rem;
}

.signup-shell .signup-step-card--profile .adamstax-checkbox .mud-checkbox {
    align-items: center;
}

.signup-shell .signup-step-card--profile .mud-checkbox-label,
.signup-shell .signup-step-card--profile .mud-checkbox .mud-typography {
    color: var(--color-brand-blue-700) !important;
    font-family: var(--tops-body-font);
    font-size: var(--tops-body-size);
    line-height: var(--tops-body-line);
    padding-top: 0;
}

/* Step 5 action row — Back sits above the stepper, same as steps 3 and 4. */
.signup-shell:has(.signup-step-card--profile) .signup-actions-row {
    align-items: center;
    display: flex;
    gap: var(--spacing-4);
    justify-content: flex-start;
    margin-top: 0.5rem;
    padding-top: 0.25rem;
}

.signup-shell:has(.signup-step-card--profile) .signup-back-link {
    color: var(--color-brand-blue-700);
    font-size: var(--tops-body-size);
    font-weight: 500;
}

/* Step 5 Back to login link */
.signup-shell .signup-login-prompt {
    color: var(--color-stormy-grey-700);
    font-family: var(--tops-body-font);
    font-size: var(--tops-body-size);
    line-height: var(--tops-body-line);
    margin: var(--spacing-4) 0 0;
    text-align: left;
}

.signup-shell .signup-login-link {
    color: var(--color-brand-blue-600);
    font-weight: 500;
    text-decoration: none;
}

.signup-shell .signup-login-link:hover,
.signup-shell .signup-login-link:focus-visible {
    text-decoration: underline;
}