.pauk-auth-split {
    --pauk-auth-heading: #4D4D4D;
    --pauk-auth-muted: #6B7280;
    --pauk-auth-accent: #285CDA;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

body:has(.pauk-auth-split) {
    background-color: #fff !important;
}

body:has(.pauk-auth-split) .mud-main-content {
    padding: 0;
}

/* Left panel */
.pauk-auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px 60px;
    overflow: hidden;
    background: #232032;
    color: #fff;
}

    .pauk-auth-aside::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: url('../Images/circuit.svg') center center / cover no-repeat;
    }

    .pauk-auth-aside > * {
        position: relative;
    }

.pauk-auth-wordmark {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 3px;
}

.pauk-auth-copy h2 {
    margin: 0 0 18px;
    max-width: 20ch;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -1.1px;
    line-height: 1.14;
    text-wrap: pretty;
}

.pauk-auth-copy p {
    margin: 0;
    /* Wide enough to keep the subline on one row; it still wraps on a narrow panel. */
    max-width: 46ch;
    font-size: 17px;
    line-height: 1.55;
    color: #CFCBDE;
    text-wrap: pretty;
}

.pauk-auth-aside-foot {
    font-size: 12.5px;
    color: #B3AFC6;
}

/* Right column */
.pauk-auth-main {
    display: grid;
    place-items: center;
    padding: 40px 24px;
    background: #fff;
}

.pauk-auth-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 352px;
}

.pauk-auth-wordmark-mobile {
    display: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2.4px;
    color: var(--pauk-auth-heading);
}

.pauk-auth-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.6px;
    color: var(--pauk-auth-heading);
}

.pauk-auth-subtitle {
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--pauk-auth-muted);
}

/* A field box runs 4px past its input, and its absolutely positioned label
   starts 6px below the box top, so every gap here is the design value minus
   that overhead. */
.pauk-auth-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* `custom-pauk-input` puts the label at top: -24px, so each field has to
   reserve the space itself — same trick as `.mud-grid-item:has(.custom-pauk-input)`
   in app.css. */
.pauk-auth-field {
    padding-top: 26px;
}

/* app.css bumps a shrunk/focused label to 1rem, which outsizes the button. */
.pauk-auth-field .custom-pauk-input .mud-input-label,
.pauk-auth-field .custom-pauk-input .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
.pauk-auth-field .custom-pauk-input .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    font-size: 14px;
}

.pauk-auth-field .custom-pauk-input .mud-input-outlined {
    border-radius: 8px;
}

.pauk-auth-field .custom-pauk-input .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 13px;
    padding-bottom: 13px;
}

/* MudBlazor paints adornments with `--mud-palette-action-default` (54% black)
   and sizes them 48x48 round, which makes the reveal icon read as heavy as the
   text beside it and overflow a 46px field. */
.pauk-auth-field .custom-pauk-input .mud-input-adornment .mud-icon-button {
    padding: 6px;
    border-radius: 8px;
    color: #94A3B8;
}

    /* MudBlazor also fills the button on `:focus-within` / `:active`, so the grey
       square lingers after a click until the field loses focus. Drop the fill on
       every pointer state and keep it for keyboard focus only. */
    .pauk-auth-field .custom-pauk-input .mud-input-adornment .mud-icon-button:hover,
    .pauk-auth-field .custom-pauk-input .mud-input-adornment .mud-icon-button:focus-within,
    .pauk-auth-field .custom-pauk-input .mud-input-adornment .mud-icon-button:active {
        color: #475569;
        background-color: transparent;
    }

    .pauk-auth-field .custom-pauk-input .mud-input-adornment .mud-icon-button:focus-visible {
        background-color: var(--mud-palette-action-default-hover);
    }

    /* A click also appends a `.mud-ripple-effect` span that grows to fill the
       button and fades over ~0.9s — clipped to the 8px radius it reads as a grey
       square, which is the one thing left after the focus fill is gone. */
    .pauk-auth-field .custom-pauk-input .mud-input-adornment .mud-icon-button .mud-ripple-effect {
        display: none;
    }

/* Chrome paints the autofill tint on the input element only, so it stops short
   of the adornment. Pin the input to a known colour and repeat it on the
   wrapper, so the whole field fills evenly. */
.pauk-auth-field .custom-pauk-input .mud-input input:-webkit-autofill,
.pauk-auth-field .custom-pauk-input .mud-input input:-webkit-autofill:hover,
.pauk-auth-field .custom-pauk-input .mud-input input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1000px #E8F0FE;
    -webkit-text-fill-color: #0A0A0A;
}

.pauk-auth-field .custom-pauk-input .mud-input-outlined:has(input:-webkit-autofill) {
    background-color: #E8F0FE;
}

.pauk-auth-reset {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--pauk-auth-muted);
}

.pauk-auth-back {
    margin: 6px 0 0;
    font-size: 12.5px;
    text-align: center;
}

    /* MudLink paints its colour with !important. */
    .pauk-auth-reset .mud-link,
    .pauk-auth-back .mud-link {
        font-weight: 600;
        color: var(--pauk-auth-accent) !important;
    }

/* `pauk-primary-button` locks height/radius/size/casing with !important. */
.pauk-auth-split .pauk-auth-submit {
    margin: 14px 0 0 !important;
    height: 48px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.pauk-auth-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 11.5px;
    color: var(--pauk-auth-muted);
}

    .pauk-auth-foot .mud-link {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--pauk-auth-accent) !important;
    }

    .pauk-auth-foot .pauk-auth-dot {
        flex-shrink: 0;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #E5E7EB;
    }

@media (max-width: 900px) {
    .pauk-auth-split {
        grid-template-columns: 1fr;
    }

    .pauk-auth-aside {
        display: none;
    }

    .pauk-auth-wordmark-mobile {
        display: block;
    }
}