/* Dr.MVP V2 System Screens: login (LOS02), sign-up 3 steps (LOS03), forgot password (LOS04).
   Source: LoggedOut_System_Screens_Preview.html line 8 (.auth-layout .. .modal-body), DrMVP_Website_Handoff_20261007_LoggedOut_v1.2.
   Spec: docs/plans/20261007_DrMVP_V2_System_Screens_Spec_DRAFT.md sections 1.2, 2.3, 3.4, 4.2. Every rule starts with .drmvpv2-auth.
   Not ported (prototype only): .preview-note, .inline-result.show, .signup-panel{display:none}. */
.drmvpv2-auth{--navy:#071b4d;--blue:#0b63e5;--yellow:#ffbd1a;--line:#d8e2ef;--soft:#f3f7fc;--muted:#60728e;--green:#08b94e;--shadow:0 18px 50px rgba(7,27,77,.12);color:var(--navy);font-family:"Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;line-height:1.65}
.drmvpv2-auth,.drmvpv2-auth *,.drmvpv2-auth *::before,.drmvpv2-auth *::after{box-sizing:border-box}
.drmvpv2-auth[hidden],.drmvpv2-auth [hidden]{display:none!important}
/* Preview has no link reset, so links are UA-underlined there; Bootstrap removes the underline -> restore it. */
.drmvpv2-auth a{color:inherit;text-decoration:underline}
.drmvpv2-auth.system-main{min-height:640px;background:linear-gradient(150deg,#f6f9fd 0,#fff 48%,#f0f5fc 100%)}

/* Layout. Integration change: tracks use minmax(0,..) instead of minmax(320px,..)/minmax(380px,..) -
   the delivered minimums (320+380+40 gap+60 padding = 800px) overflow horizontally between 768 and 799px. */
.drmvpv2-auth .auth-layout{min-height:700px;display:grid;grid-template-columns:minmax(0,480px) minmax(0,620px);gap:90px;align-items:center;justify-content:center;padding:70px 30px}
.drmvpv2-auth .auth-story{max-width:470px;min-width:0}
.drmvpv2-auth .eyebrow{margin:0 0 14px;color:var(--blue);font-size:13px;font-weight:900;letter-spacing:.16em}
.drmvpv2-auth .auth-story h1{margin:0;font-size:48px;line-height:1.25}
.drmvpv2-auth .auth-story p:not(.eyebrow){margin:17px 0;color:var(--muted);font-size:17px;line-height:1.9}
.drmvpv2-auth .story-points{display:grid;gap:13px;margin-top:28px}
.drmvpv2-auth .story-point{display:flex;align-items:center;gap:12px;font-weight:800}
.drmvpv2-auth .story-point i{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;background:#e6f0ff;color:var(--blue);font-style:normal}

/* Card + fields. select:not(.dw-hsel): mobiscroll hides the real <select> with .dw-hsel (1px, clipped) and shows #Gender_dummy instead. */
.drmvpv2-auth .form-card{min-width:0;padding:38px;border:1px solid var(--line);border-radius:26px;background:#fff;box-shadow:var(--shadow)}
.drmvpv2-auth .form-card h2{margin:0 0 6px;font-size:28px}
.drmvpv2-auth .form-card>p:not(.inline-result){margin:0 0 26px;color:var(--muted);line-height:1.7}
.drmvpv2-auth .form-card>h2+.signup-progress{margin-top:20px}
.drmvpv2-auth .form-grid{display:grid;gap:17px}
.drmvpv2-auth .form-grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.drmvpv2-auth .field{min-width:0;display:grid;gap:7px;margin:0;color:#314564;font-size:14px;font-weight:800}
.drmvpv2-auth label{margin:0}
.drmvpv2-auth .field input,.drmvpv2-auth .field select:not(.dw-hsel){width:100%;min-height:52px;padding:12px 14px;border:1px solid #cbd8e8;border-radius:10px;background:#fff;color:var(--navy);font:inherit;font-weight:400;outline:0}
.drmvpv2-auth .field input:focus,.drmvpv2-auth .field select:not(.dw-hsel):focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,99,229,.1)}
.drmvpv2-auth .field input:disabled{background:#eef2f7;color:#72819a}
.drmvpv2-auth .wide{grid-column:1/-1}
.drmvpv2-auth .check{display:flex;flex-wrap:wrap;align-items:flex-start;gap:9px;color:#4f6280;font-size:13px;line-height:1.6}
.drmvpv2-auth .check input{margin-top:4px;flex:0 0 auto}
.drmvpv2-auth .check label{flex:1 1 0;min-width:0;font-weight:400}
.drmvpv2-auth .check .error-msg{flex:0 0 100%}
.drmvpv2-auth .primary-action{width:100%;min-height:54px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-size:16px;font-weight:900;cursor:pointer}
.drmvpv2-auth .primary-action:disabled{opacity:.6;cursor:not-allowed}
.drmvpv2-auth .auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:17px;color:var(--blue);font-size:14px}

/* Errors: jQuery Validate prepends <label class="form-error"> into .error-msg; server errors come from ValidationSummary (spec 8 D1 default: red, below the password field). */
.drmvpv2-auth .error-msg{display:block;color:#a4262c;font-size:13px;font-weight:700}
.drmvpv2-auth .error-msg:empty{display:none}
.drmvpv2-auth .error-msg label{margin:0;font-weight:700}
/* QA FAIL-1 (2026-10-08): on a valid field jQuery Validate leaves an EMPTY <label> inside .error-msg, so :empty above no longer matches and the block grows ~30px, pushing the Next button away mid-click. Hide the empty label so the block collapses to 0. */
.drmvpv2-auth .error-msg label:empty{display:none!important} /* !important: jQuery Validate writes inline display:inline-block on the label (QA recheck 10-08) */
.drmvpv2-auth .auth-error{color:#a4262c;font-size:14px;font-weight:700}
.drmvpv2-auth .auth-error:empty,.drmvpv2-auth .auth-error:has(.validation-summary-valid){display:none}
.drmvpv2-auth .auth-error ul{margin:0;padding-left:18px}
/* Designer confirmation 10-08 item 18: the error must not rely on colour alone -> framed box + "!" badge (badge hidden from screen readers via content alt text; the message text itself is read). */
.drmvpv2-auth .auth-error .validation-summary-errors{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid #a4262c;border-left-width:4px;border-radius:10px;background:#fdf1f1}
.drmvpv2-auth .auth-error .validation-summary-errors::before{content:"!";content:"!"/"";flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;margin-top:2px;border-radius:50%;background:#a4262c;color:#fff;font-size:13px;font-weight:900;line-height:1}
.drmvpv2-auth .auth-error .validation-summary-errors ul{min-width:0;padding-left:0;list-style:none}
.drmvpv2-auth .form-group{margin:0}

/* Forgot password result (#result). Delivered .inline-result is display:none until .show; here the shared script fills #result, so hide only while empty. */
.drmvpv2-auth .inline-result{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:#e8f7ee;color:#17693b;font-size:13px;text-align:left;overflow-wrap:anywhere}
.drmvpv2-auth #result:empty{display:none}
/* Item 23 send-failure message (set by Forgot_drmvp_v2.cshtml). */
.drmvpv2-auth .inline-result.is-error{background:#fdf1f1;color:#a4262c}

/* Sign-up progress. .step1/.step2/.step3 + .imgBox-desc are driven by Scripts/SignUp/index.js (text-primary = current/done, text-black-50 = upcoming);
   Bootstrap's .text-primary/.text-black-50 are !important, so the colour override must be too (spec 1.2 / 3.4). */
.drmvpv2-auth .signup-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 26px}
.drmvpv2-auth .signup-step{min-width:0}
.drmvpv2-auth .signup-step .imgBox-desc{display:block;padding:10px;border-radius:10px;background:#eef2f7;color:#72819a;text-align:center;font-size:12px;font-weight:900;line-height:1.5}
.drmvpv2-auth .signup-step .imgBox-desc.text-primary{color:var(--blue)!important;background:#e4efff}
.drmvpv2-auth .signup-step .imgBox-desc.text-black-50{color:#72819a!important;background:#eef2f7}

/* Carousel keeps index.js slide events (spec 8 D11). Small inset so focus rings are not clipped by .carousel-inner{overflow:hidden}. */
.drmvpv2-auth .carousel-inner{padding:4px}

/* mobiscroll (spec 8 D3: keep the scroller, restyle the box). Legacy dispatcher styles use ID selectors -> need (1,1,0). */
.drmvpv2-auth #Gender_dummy,.drmvpv2-auth #Birthday_dummy{display:block;width:100%;height:auto;min-height:52px;padding:12px 14px;border:1px solid #cbd8e8;border-radius:10px;background:#fff;color:var(--navy);font:inherit;font-weight:400;line-height:1.65}
.drmvpv2-auth #Gender_dummy[disabled],.drmvpv2-auth #Birthday_dummy[disabled]{background:#eef2f7;color:#72819a}

/* Step 2 */
.drmvpv2-auth .signup-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px}
.drmvpv2-auth .secondary-action{width:100%;min-height:54px;border:1px solid #cddaea;border-radius:10px;background:#fff;color:var(--navy);font-size:16px;font-weight:900;cursor:pointer}
.drmvpv2-auth .secondary-action:disabled{opacity:.6;cursor:not-allowed}

/* Step 2.5: Views/Signup/MobileVerification.cshtml is shared by all four brands and is NOT edited; it is appended inside #mobileInput.
   Restyle it only inside .drmvpv2-auth #mobileInput. !important is limited to Bootstrap utilities that are themselves !important (.bg-info, .bg-danger, .text-white). */
.drmvpv2-auth #mobileInput #VerificationCode{margin:0}
.drmvpv2-auth #mobileInput .jumbotron{width:100%;margin:0;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--soft)!important;text-align:center}
.drmvpv2-auth #mobileInput .jumbotron .card-header{margin:0 0 8px;padding:10px 14px;border:0;border-radius:10px;background:#e4efff!important;color:var(--blue)!important;font-size:18px}
.drmvpv2-auth #mobileInput .jumbotron .card-title{margin:0;color:var(--muted);font-size:15px;font-weight:800}
.drmvpv2-auth #mobileInput .jumbotron h2{margin:12px 0 0;font-size:inherit}
.drmvpv2-auth #mobileInput #timer{display:inline-block;padding:8px 14px;border-radius:10px;background:var(--navy);color:#fff;font-size:22px;font-weight:900;letter-spacing:.06em}
.drmvpv2-auth #mobileInput .input-group-prepend{display:none}
.drmvpv2-auth #mobileInput #txtVerificationCode{width:100%;min-height:52px;padding:12px 14px;border:1px solid #cbd8e8;border-radius:10px;background:#fff;color:var(--navy);font:inherit;text-align:center;letter-spacing:.2em}
.drmvpv2-auth #mobileInput #txtVerificationCode:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,99,229,.1)}
.drmvpv2-auth #mobileInput #btnSubmitVerificationCode{width:100%;min-height:54px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-size:16px;font-weight:900}
.drmvpv2-auth #mobileInput h5{margin:0;color:#4f6280;font-size:14px;font-weight:400}
.drmvpv2-auth #mobileInput #btnReSubmit{color:var(--blue);font-weight:800}

/* Step 3 success (case 417, 2026-10-22; replaces the 10-07 .signup-done block). Values from
   docs/design/DrMVP_Beta_Fix_Request_20261022_v1.0/Language_Lead_Success_State_Review/DrMVP_Language_Lead_Success_State_Review_20261022.html:34-47 (.success ... .done) and :66-70 (mobile).
   Title is an h3 here (page already has h1 + card h2); .done is a link to /Login/ instead of a button. */
.drmvpv2-auth .signup-success{display:grid;justify-items:center;padding:6px 0 0;text-align:center}
.drmvpv2-auth .signup-success-icon{display:grid;width:70px;height:70px;place-items:center;border:1px solid #9bd7bf;border-radius:50%;background:#eefaf5;color:#087a53;box-shadow:0 14px 32px rgba(8,122,83,.14)}
.drmvpv2-auth .signup-success-icon svg{width:37px;height:37px}
.drmvpv2-auth .signup-success-kicker{margin:14px 0 5px;color:#087a53;font-size:12px;font-weight:900;letter-spacing:.12em}
.drmvpv2-auth .signup-success h3{margin:0;font-size:30px;font-weight:800;line-height:1.35}
.drmvpv2-auth .signup-success-copy{max-width:520px;margin:9px auto 0;color:#4c678d;font-size:16px;line-height:1.65}
.drmvpv2-auth .signup-success-receipt{width:min(500px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:17px auto 0;border:1px solid #9bd7bf;border-radius:15px;background:#eefaf5;text-align:left}
.drmvpv2-auth .signup-success-receipt div{min-width:0;padding:10px 16px}
.drmvpv2-auth .signup-success-receipt div+div{border-left:1px solid #9bd7bf}
.drmvpv2-auth .signup-success-receipt span{display:block;color:#557b6d;font-size:12px;font-weight:800}
.drmvpv2-auth .signup-success-receipt strong{display:block;margin-top:5px;color:#075c40;font-size:16px}
.drmvpv2-auth .signup-success-note{display:flex;align-items:center;gap:8px;margin:12px 0 0;color:#617692;font-size:14px}
.drmvpv2-auth .signup-success-note::before{content:"i";content:"i"/"";flex:0 0 auto;display:grid;width:20px;height:20px;place-items:center;border-radius:50%;background:#e7effa;color:#0969e8;font-size:12px;font-weight:900}
.drmvpv2-auth .signup-success-action{min-width:190px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;margin-top:17px;padding:10px 24px;border-radius:12px;background:#0969e8;color:#fff;font-weight:900;text-decoration:none;box-shadow:0 10px 24px rgba(9,105,232,.2)}
.drmvpv2-auth .signup-success-action:hover,.drmvpv2-auth .signup-success-action:focus{color:#fff;text-decoration:none}

/* Sign-up failure message (case 417, 2026-10-22): stays visible below the form until the user edits a field or submits again.
   #drmvpv2SignupError exists only in Index_drmvp_v2.cshtml; Scripts/SignUp/index.js writes plain text into it (other brands keep the toast).
   Same framed box + "!" badge as the login error above (designer confirmation 10-08 item 18: not colour alone). */
.drmvpv2-auth .signup-alert{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;padding:10px 12px;border:1px solid #a4262c;border-left-width:4px;border-radius:10px;background:#fdf1f1;color:#a4262c;font-size:14px;font-weight:700;line-height:1.6;overflow-wrap:anywhere}
.drmvpv2-auth .signup-alert::before{content:"!";content:"!"/"";flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;margin-top:2px;border-radius:50%;background:#a4262c;color:#fff;font-size:13px;font-weight:900;line-height:1}

/* Case 419 pkg 4 (design 2026-10-27 T5/T6/T9): result states built by Scripts/SignUp/index.js on the V2 page only.
   Same .signup-success layout as Step 3; .is-pending swaps to the neutral colours of 01_Form_Result_States_UI_Review.html
   (--pending #8a6200 / --pending-soft #fff8e6 / --pending-line #e8c96c, .receipt span #806a35 / strong #725200);
   .signup-success-actions + .is-secondary = that file's .actions / .action.secondary; .is-single = one-row receipt. */
.drmvpv2-auth .signup-success.is-pending .signup-success-icon{border-color:#e8c96c;background:#fff8e6;color:#8a6200;box-shadow:0 14px 32px rgba(138,98,0,.12)}
.drmvpv2-auth .signup-success.is-pending .signup-success-kicker{color:#8a6200}
.drmvpv2-auth .signup-success.is-pending .signup-success-receipt{border-color:#e8c96c;background:#fff8e6}
.drmvpv2-auth .signup-success.is-pending .signup-success-receipt div+div{border-color:#e8c96c}
.drmvpv2-auth .signup-success.is-pending .signup-success-receipt span{color:#806a35}
.drmvpv2-auth .signup-success.is-pending .signup-success-receipt strong{color:#725200}
.drmvpv2-auth .signup-success-receipt.is-single{grid-template-columns:minmax(0,1fr)}
.drmvpv2-auth .signup-success-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:17px}
.drmvpv2-auth .signup-success-actions .signup-success-action{margin-top:0}
.drmvpv2-auth button.signup-success-action{border:0;font:inherit;font-weight:900;cursor:pointer}
.drmvpv2-auth .signup-success-action.is-secondary{border:1px solid #0969e8;background:#fff;color:#0969e8;box-shadow:none}
.drmvpv2-auth .signup-success-action.is-secondary:hover,.drmvpv2-auth .signup-success-action.is-secondary:focus{color:#0969e8}
@media(max-width:767px){
    .drmvpv2-auth .signup-success-actions{width:100%}
}

.drmvpv2-auth a:focus-visible,.drmvpv2-auth button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

@media(max-width:1100px){
    .drmvpv2-auth .auth-layout{gap:40px}
}
@media(max-width:767px){
    .drmvpv2-auth .auth-layout{min-height:auto;display:block;padding:52px 18px}
    .drmvpv2-auth .auth-story{margin-bottom:28px}
    .drmvpv2-auth .auth-story h1{font-size:32px}
    .drmvpv2-auth .auth-story p:not(.eyebrow){font-size:15px}
    .drmvpv2-auth .form-card{padding:24px 18px;border-radius:20px}
    .drmvpv2-auth .form-grid.two{grid-template-columns:minmax(0,1fr)}
    .drmvpv2-auth .auth-links{display:grid}
    .drmvpv2-auth #mobileInput .jumbotron{padding:18px 14px}
    .drmvpv2-auth .signup-success-icon{width:76px;height:76px}
    .drmvpv2-auth .signup-success h3{font-size:28px}
    .drmvpv2-auth .signup-success-receipt{grid-template-columns:minmax(0,1fr)}
    .drmvpv2-auth .signup-success-receipt div+div{border-top:1px solid #9bd7bf;border-left:0}
    .drmvpv2-auth .signup-success-action{width:100%}
}

/* Case 419 block 3a: login title only (h1.auth-login-title in Login/Index_drmvp_v2.cshtml). At 768-900px the left column is too narrow for the 48px second line (8 chars ~384px) and it wrapped to 3 lines; 40px keeps the two designed lines. Signup / forgot-password h1 are untouched. */
@media(min-width:768px) and (max-width:900px){
    .drmvpv2-auth .auth-story h1.auth-login-title{font-size:40px}
}