/*
 * NeurodiverCity sign-in layout, shared by the portal (sign in, register, password reset, two-factor) and the operator
 * panel's sign-in pages. A card on a soft background: the brand's picture panel (photo or sidebar colours) on the left,
 * the form on the right. Narrow screens stack them, with a shorter picture panel.
 */

.ndc-auth-body {
    --ndc-auth-accent: var(--ndc-op-accent, var(--ndc-accent, #f40867));
    --ndc-auth-accent-dark: color-mix(in srgb, var(--ndc-auth-accent) 84%, black);
    --ndc-auth-page: #eef2f8;
    --ndc-auth-surface: #ffffff;
    --ndc-auth-soft: #f5f7fb;
    --ndc-auth-line: #dfe4ec;
    --ndc-auth-text: #141b2b;
    --ndc-auth-muted: #5d6879;
    --ndc-auth-radius: 22px;
    --ndc-auth-field: 10px;
    min-height: 100%;
    margin: 0;
    background: var(--ndc-auth-page);
    color: var(--ndc-auth-text);
    font-family: var(--ndc-font, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
}

/* The brand's heading font for the sign-in pages' headings and wordmark. */
.ndc-auth-body :is(h1, h2, h3, .ndc-auth-wordmark) { font-family: var(--ndc-font-heading, inherit); }

.sp-theme-dark .ndc-auth-body,
.ndc-auth-body.sp-theme-dark,
html.sp-theme-dark body.ndc-auth-body {
    --ndc-auth-page: #141a22;
    --ndc-auth-surface: #1d2530;
    --ndc-auth-soft: #252f3c;
    --ndc-auth-line: #334051;
    --ndc-auth-text: #e6ecf3;
    --ndc-auth-muted: #a5b0bf;
}

.ndc-auth {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    padding: 2rem max(1rem, env(safe-area-inset-right, 0px)) 2rem max(1rem, env(safe-area-inset-left, 0px));
}

.ndc-auth-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    max-width: 90rem;
    min-height: min(56rem, calc(100vh - 4rem));
    overflow: hidden;
    border-radius: var(--ndc-auth-radius);
    background: var(--ndc-auth-surface);
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 24px 60px rgb(16 24 40 / 0.12);
}

/* ---------- Picture panel ---------- */

.ndc-auth-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 3.5rem clamp(2rem, 5vw, 6rem);
    overflow: hidden;
    background:
        radial-gradient(60rem 30rem at 85% 0%, color-mix(in srgb, var(--ndc-auth-mark) 30%, transparent), transparent 60%),
        linear-gradient(160deg, var(--ndc-auth-from), var(--ndc-auth-to));
    color: #fff;
    isolation: isolate;
}

/* With a photo: the photo, darkened towards the text (top left) and the features (bottom). */
.ndc-auth-hero.ndc-auth-has-image {
    background:
        linear-gradient(180deg, rgb(10 15 25 / 0.55) 0%, rgb(10 15 25 / 0.1) 45%, rgb(10 15 25 / 0.75) 100%),
        linear-gradient(90deg, rgb(10 15 25 / 0.55), transparent 70%),
        var(--ndc-auth-image) center / cover no-repeat,
        var(--ndc-auth-to);
}

.ndc-auth-wordmark {
    font-size: clamp(2.25rem, 3.6vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}

.ndc-auth-wordmark span {
    color: var(--ndc-auth-mark);
}

.ndc-auth-wordmark img {
    display: block;
    max-width: 16rem;
    max-height: 4rem;
    object-fit: contain;
}

.ndc-auth-eyebrow {
    margin-top: 0.85rem;
    color: rgb(255 255 255 / 0.82);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.ndc-auth-hero-copy h2 {
    max-width: 16ch;
    margin: 0 0 1rem;
    color: #fff;
    font-size: clamp(1.9rem, 2.6vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-wrap: balance;
}

.ndc-auth-hero-copy p {
    max-width: 34rem;
    margin: 0;
    color: rgb(255 255 255 / 0.85);
    font-size: 1.1rem;
    line-height: 1.6;
}

.ndc-auth-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin: auto 0 0;
    padding: 0;
    list-style: none;
}

.ndc-auth-features li {
    display: grid;
    align-content: start;
    gap: 0.3rem;
}

.ndc-auth-feature-icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: 12px;
    background: rgb(255 255 255 / 0.12);
    backdrop-filter: blur(6px);
}

.ndc-auth-feature-icon svg,
.ndc-auth-feature-icon i {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.35rem;
}

.ndc-auth-features strong {
    font-size: 1.05rem;
}

.ndc-auth-features span:not(.ndc-auth-feature-icon) {
    color: rgb(255 255 255 / 0.75);
    font-size: 0.9rem;
}

/* ---------- Form side ---------- */

.ndc-auth-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2rem clamp(1.5rem, 4vw, 4rem) 2.5rem;
    background:
        radial-gradient(40rem 30rem at 100% 100%, color-mix(in srgb, var(--ndc-auth-accent) 7%, transparent), transparent 70%),
        var(--ndc-auth-surface);
}

.ndc-auth-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.75rem;
}

.ndc-auth-home {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ndc-auth-muted);
    font-size: 0.9rem;
    text-decoration: none;
}

.ndc-auth-home:hover {
    color: var(--ndc-auth-text);
}

.ndc-auth-home svg {
    width: 1rem;
    height: 1rem;
}

.ndc-auth-language {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0 0.75rem;
    border: 1px solid var(--ndc-auth-line);
    border-radius: var(--ndc-auth-field);
    background: var(--ndc-auth-surface);
    color: var(--ndc-auth-muted);
}

.ndc-auth-language svg {
    width: 1.1rem;
    height: 1.1rem;
}

.ndc-auth-language select {
    min-height: 2.6rem;
    padding: 0 1.25rem 0 0;
    border: 0;
    background-color: transparent;
    color: var(--ndc-auth-text);
    font: inherit;
    font-size: 0.9rem;
    box-shadow: none;
}

.ndc-auth-body .ndc-auth-body,
.ndc-auth-main > .ndc-auth-body {
    width: 100%;
    max-width: 32rem;
    margin: auto;
    padding: 2.5rem 0 0;
    background: transparent;
}

.ndc-auth-main h1 {
    margin: 0 0 0.75rem;
    color: var(--ndc-auth-text);
    font-size: clamp(1.9rem, 2.4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-wrap: balance;
}

.ndc-auth-lead {
    margin: 0 0 2rem;
    color: var(--ndc-auth-muted);
    font-size: 1.1rem;
    line-height: 1.55;
}

/* Fields: labels above, full-width inputs (also SupportPal's own forms on register, reset and two-factor pages). */
.ndc-auth-main .sp-form-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    margin: 0 0 1.25rem;
    padding: 0;
}

.ndc-auth-main .sp-form-row > label {
    width: auto;
    margin: 0;
    padding: 0;
    color: var(--ndc-auth-text);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: start;
}

.ndc-auth-main .sp-form-row > label:empty {
    display: none;
}

.ndc-auth-main .sp-input-container {
    width: 100%;
    max-width: none;
}

.ndc-auth-main input[type=text],
.ndc-auth-main input[type=email],
.ndc-auth-main input[type=password],
.ndc-auth-main input[type=number],
.ndc-auth-main input[type=tel],
.ndc-auth-main select:not(.ndc-auth-language select),
.ndc-auth-main textarea {
    width: 100%;
    min-height: 3.25rem;
    box-sizing: border-box;
    padding: 0 1rem;
    border: 1px solid var(--ndc-auth-line);
    border-radius: var(--ndc-auth-field);
    background: var(--ndc-auth-surface);
    color: var(--ndc-auth-text);
    font: inherit;
    font-size: 1rem;
    box-shadow: none;
}

.ndc-auth-main textarea {
    padding-block: 0.75rem;
}

.ndc-auth-main input::placeholder,
.ndc-auth-main textarea::placeholder {
    color: color-mix(in srgb, var(--ndc-auth-muted) 75%, var(--ndc-auth-surface));
}

.ndc-auth-main input:focus,
.ndc-auth-main select:focus,
.ndc-auth-main textarea:focus {
    border-color: var(--ndc-auth-accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ndc-auth-accent) 20%, transparent);
}

/* Field with an icon (and, for passwords, the show button). */
.ndc-auth-input {
    position: relative;
}

.ndc-auth-input > svg,
.ndc-auth-input > i {
    position: absolute;
    top: 1.625rem;
    inset-inline-start: 1rem;
    width: 1.2rem;
    height: 1.2rem;
    transform: translateY(-50%);
    color: var(--ndc-auth-muted);
    font-size: 1.05rem;
    text-align: center;
    pointer-events: none;
}

.ndc-auth-main .ndc-auth-input input {
    padding-inline-start: 2.9rem;
}

/* SupportPal wraps password fields for its own show/hide button; the eye button here replaces it. */
.ndc-auth-main .hideShowPassword-wrapper {
    display: block !important;
    width: 100% !important;
}

.ndc-auth-input .hideShowPassword-toggle,
.ndc-auth-input [class*="hideShowPassword-toggle"] {
    display: none !important;
}

.ndc-auth-input > svg,
.ndc-auth-input > i,
.ndc-auth-eye {
    z-index: 2;
}

.ndc-auth-main .ndc-auth-input:has(.ndc-auth-eye) input {
    padding-inline-end: 3rem;
}

.ndc-auth-eye {
    position: absolute;
    top: 0.375rem;
    inset-inline-end: 0.375rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ndc-auth-muted);
    cursor: pointer;
}

.ndc-auth-eye:hover {
    background: var(--ndc-auth-soft);
    color: var(--ndc-auth-text);
}

.ndc-auth-eye svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ndc-auth-eye .ndc-auth-eye-hide,
.ndc-auth-eye.ndc-auth-eye-on .ndc-auth-eye-show {
    display: none;
}

.ndc-auth-eye.ndc-auth-eye-on .ndc-auth-eye-hide,
.ndc-auth-eye .ndc-auth-eye-show {
    display: contents;
}

/* Error messages from validation sit under their field. */
.ndc-auth-main .ndc-auth-input .help-block,
.ndc-auth-main .ndc-auth-input .error-help-block {
    display: block;
    margin-top: 0.35rem;
}

.ndc-auth-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin: 0.25rem 0 1.75rem;
}

.ndc-auth-row a,
.ndc-auth-alt a,
.ndc-auth-main .ndc-auth-body a:not([class]) {
    color: var(--ndc-auth-accent);
    font-weight: 600;
    text-decoration: none;
}

.ndc-auth-row a:hover,
.ndc-auth-alt a:hover {
    text-decoration: underline;
}

.ndc-auth-row .sp\:flex-auto {
    flex: none;
}

.ndc-auth-check {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    color: var(--ndc-auth-text);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.ndc-auth-check input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--ndc-auth-accent);
}

/* Buttons: sign in in the accent colour, single sign-on in a soft grey. */
.ndc-auth-submit,
.ndc-auth-main input[type=submit],
.ndc-auth-main button[type=submit]:not(.ndc-auth-eye) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 3.4rem;
    border: 0;
    border-radius: var(--ndc-auth-field);
    background: var(--ndc-auth-accent);
    color: #fff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ndc-auth-accent) 28%, transparent);
}

.ndc-auth-submit:hover,
.ndc-auth-main input[type=submit]:hover,
.ndc-auth-main button[type=submit]:not(.ndc-auth-eye):hover {
    background: var(--ndc-auth-accent-dark);
}

.ndc-auth-submit svg {
    width: 1.2rem;
    height: 1.2rem;
}

.ndc-auth-main .sp-button:not(.ndc-auth-sso),
.ndc-auth-main input[type=button] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.4rem;
    box-sizing: border-box;
    border: 1px solid var(--ndc-auth-line);
    border-radius: var(--ndc-auth-field);
    background: var(--ndc-auth-soft);
    color: var(--ndc-auth-text);
    font-weight: 600;
}

.ndc-auth-buttons {
    gap: 0.75rem;
}

.ndc-auth-buttons > div {
    padding: 0 !important;
}

.ndc-auth-or {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--ndc-auth-muted);
    font-size: 0.9rem;
}

.ndc-auth-or::before,
.ndc-auth-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--ndc-auth-line);
}

.ndc-auth-sso,
.ndc-auth-social a,
.ndc-auth-social .sp-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.4rem;
    box-sizing: border-box;
    margin-bottom: 0.75rem;
    border: 1px solid var(--ndc-auth-line);
    border-radius: var(--ndc-auth-field);
    background: var(--ndc-auth-soft);
    color: var(--ndc-auth-text);
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
}

.ndc-auth-sso:hover,
.ndc-auth-social a:hover {
    border-color: color-mix(in srgb, var(--ndc-auth-accent) 35%, var(--ndc-auth-line));
    color: var(--ndc-auth-text);
}

.ndc-auth-sso svg {
    width: 1.3rem;
    height: 1.3rem;
}

.ndc-auth-alt {
    margin: 1.5rem 0 0;
    color: var(--ndc-auth-muted);
    text-align: center;
}

.ndc-auth-help {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ndc-auth-line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ndc-auth-soft) 80%, transparent);
}

.ndc-auth-help-icon svg {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--ndc-auth-muted);
}

.ndc-auth-help strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--ndc-auth-text);
}

.ndc-auth-help p {
    margin: 0;
    color: var(--ndc-auth-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.ndc-auth-main .sp-alert {
    margin-bottom: 1.25rem;
    border-radius: var(--ndc-auth-field);
}

/* ---------- Narrow screens ---------- */

@media (max-width: 64rem) {
    .ndc-auth {
        padding: 0;
        place-items: stretch;
    }

    .ndc-auth-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }

    .ndc-auth-hero {
        gap: 1.25rem;
        padding: 2rem max(1.25rem, env(safe-area-inset-left, 0px)) 2rem;
    }

    .ndc-auth-hero-copy p,
    .ndc-auth-features {
        display: none;
    }

    .ndc-auth-hero-copy h2 {
        margin: 0;
        font-size: 1.5rem;
    }

    .ndc-auth-main {
        padding: 1.25rem max(1.25rem, env(safe-area-inset-right, 0px)) 2rem max(1.25rem, env(safe-area-inset-left, 0px));
    }

    .ndc-auth-main > .ndc-auth-body {
        padding-top: 1.5rem;
    }
}

@media (max-width: 30rem) {
    .ndc-auth-eyebrow {
        letter-spacing: 0.2em;
    }

    .ndc-auth-hero-copy {
        display: none;
    }
}

.ndc-auth-row a,
.ndc-auth-row a.sp-description {
    font-size: 0.95rem;
}

/* ---------- Shorter screens (laptops): tighter spacing so the card fits without scrolling ---------- */

@media (min-width: 64.01rem) and (max-height: 58rem) {
    .ndc-auth {
        padding-block: 1rem;
    }

    .ndc-auth-card {
        min-height: calc(100vh - 2rem);
    }

    .ndc-auth-hero {
        gap: 1.5rem;
        padding-block: 2.5rem;
    }

    .ndc-auth-wordmark {
        font-size: clamp(2rem, 3vw, 2.75rem);
    }

    .ndc-auth-eyebrow {
        margin-top: 0.6rem;
        font-size: 0.85rem;
    }

    .ndc-auth-hero-copy h2 {
        margin-bottom: 0.75rem;
        font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    }

    .ndc-auth-hero-copy p {
        font-size: 1rem;
    }

    .ndc-auth-feature-icon {
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: 0.5rem;
    }

    .ndc-auth-main {
        padding-block: 1.25rem 1.5rem;
    }

    .ndc-auth-main > .ndc-auth-body {
        padding-top: 1rem;
    }

    .ndc-auth-main h1 {
        margin-bottom: 0.5rem;
        font-size: clamp(1.6rem, 2vw, 2.1rem);
    }

    .ndc-auth-lead {
        margin-bottom: 1.25rem;
        font-size: 1rem;
    }

    .ndc-auth-main .sp-form-row {
        margin-bottom: 0.9rem;
    }

    .ndc-auth-main input[type=text],
    .ndc-auth-main input[type=email],
    .ndc-auth-main input[type=password],
    .ndc-auth-main .ndc-auth-input input {
        min-height: 2.9rem;
    }

    .ndc-auth-input > svg,
    .ndc-auth-input > i {
        top: 1.45rem;
    }

    .ndc-auth-eye {
        top: 0.2rem;
    }

    .ndc-auth-row {
        margin: 0 0 1.1rem;
    }

    .ndc-auth-submit,
    .ndc-auth-main input[type=submit],
    .ndc-auth-main button[type=submit]:not(.ndc-auth-eye),
    .ndc-auth-sso {
        min-height: 3rem;
    }

    .ndc-auth-or {
        margin: 1rem 0;
    }

    .ndc-auth-alt {
        margin-top: 1rem;
    }

    .ndc-auth-help {
        margin-top: 1.25rem;
        padding: 0.9rem 1.1rem;
    }
}

/* Very short screens: the picture panel's paragraph and the help note's text go, titles stay. */
@media (min-width: 64.01rem) and (max-height: 46rem) {
    .ndc-auth-hero-copy p,
    .ndc-auth-help p {
        display: none;
    }

    .ndc-auth-lead {
        margin-bottom: 1rem;
    }
}

/* Short windows (e.g. a laptop with display scaling, where the browser's own bars take a lot of the height). */
@media (min-width: 64.01rem) and (max-height: 44rem) {
    .ndc-auth {
        padding-block: 0.5rem;
    }

    .ndc-auth-card {
        min-height: calc(100vh - 1rem);
    }

    .ndc-auth-hero {
        gap: 1rem;
        padding-block: 1.75rem;
    }

    .ndc-auth-wordmark {
        font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    }

    .ndc-auth-hero-copy h2 {
        margin: 0;
        font-size: clamp(1.4rem, 1.9vw, 1.75rem);
    }

    .ndc-auth-feature-icon {
        width: 2.4rem;
        height: 2.4rem;
    }

    .ndc-auth-features span:not(.ndc-auth-feature-icon) {
        display: none;
    }

    .ndc-auth-main {
        padding-block: 0.75rem 1rem;
    }

    .ndc-auth-top {
        min-height: 2.25rem;
    }

    .ndc-auth-language select {
        min-height: 2.1rem;
    }

    .ndc-auth-main > .ndc-auth-body {
        padding-top: 0.25rem;
    }

    .ndc-auth-main h1 {
        font-size: 1.6rem;
    }

    .ndc-auth-lead {
        margin-bottom: 0.75rem;
        font-size: 0.95rem;
    }

    .ndc-auth-main .sp-form-row {
        gap: 0.3rem;
        margin-bottom: 0.65rem;
    }

    .ndc-auth-main input[type=text],
    .ndc-auth-main input[type=email],
    .ndc-auth-main input[type=password],
    .ndc-auth-main .ndc-auth-input input {
        min-height: 2.6rem;
    }

    .ndc-auth-input > svg,
    .ndc-auth-input > i {
        top: 1.3rem;
    }

    .ndc-auth-eye {
        top: 0.05rem;
    }

    .ndc-auth-row {
        margin-bottom: 0.75rem;
    }

    .ndc-auth-submit,
    .ndc-auth-main input[type=submit],
    .ndc-auth-main button[type=submit]:not(.ndc-auth-eye),
    .ndc-auth-sso {
        min-height: 2.75rem;
    }

    .ndc-auth-or {
        margin: 0.6rem 0;
    }

    .ndc-auth-alt {
        margin-top: 0.6rem;
    }

    .ndc-auth-help {
        margin-top: 0.75rem;
        padding: 0.6rem 1rem;
    }
}

/* Very short windows: the help note goes too. */
@media (min-width: 64.01rem) and (max-height: 37rem) {
    .ndc-auth-help,
    .ndc-auth-lead {
        display: none;
    }
}