/* Authentication shell: scrolls independently of the application's fixed body. */
.auth-scene {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    overflow: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: max(2rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
    background: linear-gradient(90deg, #020b17e8, #04102166 65%, #04102188), url('../images/auth/office-scene.png') center / cover no-repeat;
    color: #edf2f7;
    color-scheme: dark;
    font-family: Inter, Arial, sans-serif;
    font-size: clamp(1rem, .8rem + .25vw, 1.25rem);
    line-height: 1.5;
}
.auth-scene *, .auth-scene *::before, .auth-scene *::after { box-sizing: border-box; }
.auth-panel {
    width: 100%;
    max-width: 30em;
    min-width: 0;
    margin: auto;
    padding: 2em;
    border: 1px solid #7d8894;
    border-radius: .75em;
    background: linear-gradient(135deg, #101a23f5, #060d12f7);
    box-shadow: 0 1em 3em #0008;
}
.auth-brand {
    display: block;
    width: 10em;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto 1.5em;
}
.auth-panel-brand { display: none; }
.auth-entry { flex: none; width: 100%; max-width: 30em; min-width: 0; margin: 0 auto auto; }
.auth-heading h1:focus { outline: none; }
.auth-heading { text-align: center; margin-bottom: 1.75em; }
.auth-heading h1 { font-size: 1.85em; font-weight: 500; line-height: 1.2; margin: 0 0 .45em; overflow-wrap: anywhere; }
.auth-heading p { margin: 0; color: #cbd5e1; }
.auth-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.auth-field { margin-bottom: 1.25em; }
.auth-field label { display: block; margin-bottom: .5em; font-weight: 500; }
.auth-input { display: flex; align-items: center; min-height: 3.25em; border: 1px solid #84919e; border-radius: .3em; background: #ffffff09; }
.auth-input:focus-within { border-color: #b5dcff; box-shadow: 0 0 0 2px #82baf940; }
.auth-input input { width: 100%; min-width: 0; min-height: 3.25em; border: 0; background: transparent; color: #fff; font: inherit; outline: none; box-shadow: none; padding: .5em; }
.auth-input > input:first-child { padding-left: 1em; }
.auth-input input::placeholder { color: #b6c0ca; }
.auth-leading { width: 1.4em; height: 1.4em; flex-shrink: 0; margin: 0 .8em; color: #b6c0ca; text-align: center; }
.auth-toggle { display: grid; place-items: center; align-self: stretch; min-width: 48px; width: 3em; flex-shrink: 0; border: 0; background: none; color: #d1deeb; cursor: pointer; }
.auth-toggle svg { width: 1.5em; height: 1.5em; }
.auth-submit { width: 100%; min-height: 3.25em; padding: .8em; margin-top: 1.25em; border: 0; border-radius: .3em; background: #0069c0; color: #fff; font: inherit; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: .75em; cursor: pointer; overflow-wrap: anywhere; }
.auth-submit:hover:not(:disabled) { background: #0878d5; }
.auth-submit span { font-size: 1.5em; line-height: 1; }
.auth-remember { display: flex; align-items: center; gap: .75em; min-height: 48px; cursor: pointer; }
.auth-remember input { width: 1.25em; height: 1.25em; accent-color: #0672c9; }
.auth-link { display: block; width: fit-content; max-width: 100%; min-height: 44px; margin: .75em auto 0; padding: .65em; background: transparent; border: 0; color: #d1e6fc; text-decoration: underline; font: inherit; text-align: center; cursor: pointer; }
.auth-message { margin: 1.25em 0; padding: 1em; border: 1px solid #6e879c; border-radius: .3em; background: #0c1720; overflow-wrap: anywhere; }
.auth-error { border-color: #df9393; color: #ffd3d3; white-space: pre-line; }
.auth-password-help { color: #cbd5e1; margin: 0 0 1.5em; font-size: .9em; }
.auth-scene .validation-message { margin-top: .5em; color: #ffd3d3; font-size: .9em; }
.auth-scene :is(button, a, input):focus-visible { outline: 2px solid #a7c9ef; outline-offset: 3px; }
.auth-scene button:disabled, .auth-scene fieldset:disabled { opacity: .65; cursor: wait; }
/* Branding is a separate foreground column, independent of background cover/cropping. */
.auth-identity {
    flex: none;
    width: 100%;
    max-width: 30em;
    margin: auto auto 0;
    text-shadow: 0 2px 8px #000;
}
.auth-identity .auth-brand { width: 12em; max-width: 100%; margin: 0 0 1.5em; }
.auth-motto { margin: 0 0 2em; text-transform: uppercase; letter-spacing: .22em; line-height: 1.8; font-size: 1.15em; }
.auth-services { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5em; }
.auth-services li { display: flex; align-items: flex-start; gap: .9em; }
.auth-services svg { flex: none; width: 2.5em; height: 2.5em; padding: .4em; border: 1px solid #72baff; border-radius: .7em; color: #e2f1ff; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px #208bdb); }
.auth-services h2 { font-size: 1em; font-weight: 500; margin: 0 0 .25em; line-height: 1.4; }
.auth-services p { font-size: .85em; color: #d9e2ec; margin: 0; }
.auth-panel { flex: none; margin-top: 0; }
/* 20rem branding + 30rem form + gap and gutters: keep both columns until space runs out. */
@media (min-width: 62rem) {
    .auth-scene { flex-direction: row; gap: 3rem; padding-inline: max(2rem, env(safe-area-inset-left)) max(2rem, env(safe-area-inset-right)); }
    .auth-identity { width: 20em; margin: auto 0; }
    .auth-services { grid-template-columns: 1fr; gap: 2em; }
    .auth-entry { margin: auto 0 auto auto; }
    .auth-panel { margin: 0; }
}
/* Keep the form reachable with zoom and a tablet's on-screen keyboard. */
@media (max-height: 700px) {
    .auth-scene { padding-block: 1rem; }
    .auth-panel { padding: 1.5em; }
    .auth-brand { width: 7em; margin-bottom: 1em; }
    .auth-heading { margin-bottom: 1em; }
}
@media (max-width: 540px) {
    .auth-scene { padding-inline: 1rem; }
    .auth-panel { padding: 1.25em; }
}

@media (max-width: 36rem) { .auth-services { grid-template-columns: 1fr; } }

/* Portrait tablets retain only the logo above the original card. */
@media (orientation: portrait) {
    .auth-scene { flex-direction: column; gap: 1.5rem; }
    .auth-motto, .auth-services { display: none; }
    .auth-identity { width: 100%; max-width: 30em; margin: auto auto 0; }
    .auth-identity .auth-brand { width: 12em; margin: 0 auto; }
    .auth-entry { margin: 0 auto auto; }
}
/* Above the tablet range, the form lives in its own full-height right rail. */
@media (min-width: 90rem) and (orientation: landscape) {
    .auth-scene {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(30rem, 30vw, 48rem);
        gap: 0;
        padding: 0;
        overflow: hidden;
    }
    .auth-identity {
        box-sizing: border-box;
        width: 24em;
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
        padding: 2rem max(2rem, env(safe-area-inset-left));
        margin: auto 0;
    }
    .auth-entry {
        display: flex;
        height: 100%;
        min-height: 0;
        max-width: none;
        margin: 0;
        padding: max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) 2rem;
        overflow: auto;
        border-left: 1px solid #43566b;
        background: linear-gradient(150deg, #101e2b, #050d13 70%);
    }
    .auth-panel {
        max-width: 26em;
        margin: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .auth-panel-brand { display: block; width: 13em; margin: 0 auto 2em; }
}