/* The sign-in pages in the new UI (#852): Admin/_SignInLayoutNew.cshtml and the four views on it (Login.New, LoginAuth.New,
   ForgottenPassword.New, NewPassword.New). Only those pages link this file, after proteus-ui.css, whose tokens and
   components (fields, buttons, the firm colour's pgth-* classes) they use. The brand panel is the firm colour's dark
   shade (--px-accent-700) beside the form; below 768 px a slim bar above the form, which comes first. Fields and
   buttons 44 px tall and text at 16 px, so phones don't zoom in. */

body.ui-new.px-signin {
    --px-text: 1rem;
    --bs-body-font-size: 1rem;
    margin: 0;
    min-height: 100vh;
    background-color: var(--px-surface);
}

.px-signin__frame { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; min-height: 100vh; }

/* The brand panel: the firm's logo and name, the headline, the version in the corner. */
.px-signin__brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--px-space-8); padding: 40px 44px; background: var(--px-accent-700); color: #fff; }
.px-signin__brand::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; border: 56px solid rgba(255, 255, 255, .06); pointer-events: none; }
.px-signin__firm { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--px-space-3); min-width: 0; }
.px-signin__firm img { height: 40px; width: auto; flex: none; }
.px-signin__firm > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.px-signin__firm-name { font-size: 1.0625rem; font-weight: 700; overflow-wrap: anywhere; }
.px-signin__product { font-size: .875rem; color: rgba(255, 255, 255, .86); }
.px-signin__pitch { position: relative; z-index: 1; }
body.ui-new .px-signin__headline { margin: 0 0 var(--px-space-3); max-width: 15ch; font-size: 2.125rem; line-height: 1.15; font-weight: 700; text-wrap: balance; color: #fff; }
body.ui-new .px-signin__line { margin: 0; max-width: 34ch; color: rgba(255, 255, 255, .9); }
body.ui-new .px-signin__version { position: relative; z-index: 1; margin: 0; font-size: .875rem; color: rgba(255, 255, 255, .86); }

/* The form side. */
.px-signin__main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--px-space-8) var(--px-space-6); background: var(--px-surface); }
.px-signin__body { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 20px; }
body.ui-new .px-signin__body h1 { margin: 0; font-size: 1.625rem; line-height: 1.2; font-weight: 700; }
body.ui-new .px-signin__body p { margin: 0; }
body.ui-new .px-signin__lead { color: var(--px-ink-2); }
.px-signin__form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
body.ui-new .px-signin__foot { margin: var(--px-space-8) 0 0; max-width: 380px; text-align: center; font-size: .875rem; color: var(--px-ink-3); }

/* Fields: the design system's, at 44 px and 16 px. */
body.ui-new.px-signin .form-label { font-size: .9375rem; }
body.ui-new.px-signin .px-hint { font-size: .9375rem; }
body.ui-new.px-signin .form-control { min-height: 44px; padding: 10px 12px; font-size: 1rem; }
body.ui-new.px-signin .field-validation-valid { display: none; }
body.ui-new.px-signin .px-error-message { font-size: .9375rem; }
body.ui-new .px-signin__code { letter-spacing: .4em; font-size: 1.375rem; font-variant-numeric: tabular-nums; }

/* The password with its Show button inside the field's edge (the field keeps its own edge and focus ring). */
.px-signin__password { position: relative; }
body.ui-new.px-signin .px-signin__password > .form-control { width: 100%; padding-right: 76px; }
.px-signin__show { position: absolute; top: 0; right: 0; bottom: 0; min-width: 64px; min-height: 44px; padding: 0 14px; border: 0; border-left: 1px solid var(--px-line); border-radius: 0 var(--px-radius-input) var(--px-radius-input) 0; background: transparent; color: var(--px-accent); font: inherit; font-weight: 600; cursor: pointer; }
.px-signin__show:hover { color: var(--px-accent-700); text-decoration: underline; text-underline-offset: 2px; }
body.ui-new .px-signin__show:focus-visible { outline-offset: -2px; }
body.ui-new .px-signin__caps { width: fit-content; padding: 2px 8px; border-radius: var(--px-radius-input); font-size: .9375rem; font-weight: 600; color: var(--px-warning); background: var(--px-warning-bg); }
body.ui-new .px-signin__caps[hidden] { display: none; }

/* The primary button, as wide as the fields; "Signing in…" while the form is sent. */
body.ui-new .px-signin__submit { width: 100%; min-height: 44px; --bs-btn-font-size: 1rem; }
body.ui-new .px-signin__submit.is-busy, body.ui-new .px-signin__submit.is-busy:disabled { color: #fff; background-color: var(--px-accent-700); border-color: var(--px-accent-700); cursor: progress; }
.px-signin__spinner { width: 16px; height: 16px; flex: none; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: px-signin-spin .8s linear infinite; }
@keyframes px-signin-spin { to { transform: rotate(360deg); } }

/* Under the button: the captcha shows itself only when it needs the person (Turnstile's interaction-only). */
.px-signin__captcha { display: flex; flex-direction: column; gap: var(--px-space-2); margin-top: -8px; }
body.ui-new .px-signin__wait { color: var(--px-ink-2); }

/* Messages above the form: the server's refusals, and "sent" or "changed". */
body.ui-new .px-signin__alert { padding: 12px 14px; border: 1px solid; border-left-width: 4px; border-radius: var(--px-radius-card); font-weight: 600; }
body.ui-new .px-signin__alert--error { color: var(--px-danger); background: var(--px-danger-bg); border-color: var(--px-danger-line); border-left-color: var(--px-danger); }
body.ui-new .px-signin__alert--success { color: var(--px-success); background: var(--px-success-bg); border-color: #9BCBAE; border-left-color: var(--px-success); }

/* A phone: the slim brand bar above, the form first. */
@media (max-width: 767.98px) {
    .px-signin__frame { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .px-signin__brand { flex-direction: row; align-items: center; padding: 12px 20px; }
    .px-signin__brand::after, .px-signin__pitch, body.ui-new .px-signin__version { display: none; }
    .px-signin__firm img { height: 32px; }
    .px-signin__main { justify-content: flex-start; padding: 28px 20px; }
}