/*
 * Sign-in and password screens.
 *
 * Loaded last: demo1/style.css → portal-theme.css → auth.css, so controls
 * (.form-control, .btn, .alert) already match the portal and only the page
 * shell is defined here.
 *
 * The brand panel reuses the sidebar slate from dark-nav.css on purpose — it is
 * the visual bridge between signing in and the portal you land in.
 */

.auth-body {
    --auth-panel-bg: #1e293b;
    --auth-panel-bg-deep: #16202f;
    --auth-panel-ink: #ffffff;
    --auth-panel-body: #9aa8bd;
    --auth-panel-meta: #64748b;
    --auth-panel-accent: #818cf8;
    --auth-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    margin: 0;
    background: var(--ex-surface);
    color: var(--ex-body);
}

.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* ============================================================ brand panel */

.auth-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    padding: 48px 52px;
    background: linear-gradient(180deg, var(--auth-panel-bg) 0%, var(--auth-panel-bg-deep) 100%);
}

/* Answer sheet: bled off the bottom-right corner so it reads as a fragment of
   a much larger sheet rather than a placed illustration. Kept faint — it is
   ground, not figure; the wordmark and lede stay the only things you read. */
.auth-sheet {
    position: absolute;
    right: -86px;
    bottom: -70px;
    width: 470px;
    height: auto;
    pointer-events: none;
}

.auth-sheet__ring {
    fill: none;
    stroke: rgba(255, 255, 255, .085);
    stroke-width: 1.25;
}

.auth-sheet__mark {
    fill: rgba(129, 140, 248, .26);
}

.auth-sheet__num {
    fill: rgba(255, 255, 255, .06);
    font-family: var(--auth-mono);
    font-size: 11px;
    font-weight: 500;
}

.auth-brand__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: 380px;
}

.auth-wordmark {
    display: inline-block;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.022em;
    color: var(--auth-panel-ink);
    text-decoration: none;
}

.auth-wordmark span {
    font-weight: 400;
    color: var(--auth-panel-accent);
}

.auth-wordmark:hover,
.auth-wordmark:focus {
    color: var(--auth-panel-ink);
}

.auth-lede {
    margin: 26px 0 0;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.015em;
    color: var(--auth-panel-body);
}

.auth-meta {
    margin: 0;
    font-family: var(--auth-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--auth-panel-meta);
}

/* ============================================================== form side */

.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    background: var(--ex-surface);
}

.auth-form {
    width: 100%;
    max-width: 380px;
}

/* Which step of the flow this is. Mono + tracking marks it as a label rather
   than something to read. */
.auth-step {
    margin: 0 0 10px;
    font-family: var(--auth-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ex-accent);
}

.auth-title {
    margin: 0;
    font-size: 26px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.022em;
    color: var(--ex-ink);
}

.auth-sub {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ex-muted);
}

.auth-form .alert {
    margin: 24px 0 0;
    font-size: 13.5px;
}

.auth-form form {
    margin-top: 26px;
}

.auth-field + .auth-field {
    margin-top: 18px;
}

.auth-field .form-label {
    display: block;
}

/* password field + reveal button */
.auth-secret {
    position: relative;
}

.auth-secret .form-control {
    padding-right: 44px;
}

/* Bootstrap paints its own validation glyph in the right of the field, which is
   exactly where the reveal button sits. The red border already carries the
   error, so drop the glyph here rather than crowd two icons together. */
.auth-secret .form-control.is-invalid {
    background-image: none;
    padding-right: 44px;
}

.auth-reveal {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #9ca3af;
    border-radius: 0 var(--ex-radius-ctl) var(--ex-radius-ctl) 0;
}

.auth-reveal:hover {
    color: var(--ex-body);
}

.auth-reveal svg {
    width: 17px;
    height: 17px;
}

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
}

.auth-options .form-check {
    margin: 0;
    min-height: auto;
}

.auth-options .form-check-label {
    font-size: 14px;
}

.auth-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--ex-accent);
    text-decoration: none;
}

.auth-link:hover {
    color: var(--ex-accent-hover);
    text-decoration: underline;
}

.auth-submit {
    width: 100%;
    margin-top: 24px;
    padding-top: 0.68rem;
    padding-bottom: 0.68rem;
    font-weight: 600;
}

.auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.auth-actions .btn {
    flex: 1 1 auto;
}

.auth-back {
    margin: 22px 0 0;
    font-size: 14px;
    color: var(--ex-muted);
}

.auth-field .invalid-feedback {
    font-size: 13px;
}

/* Keyboard focus stays visible everywhere, including the panel wordmark. */
.auth-body :focus-visible {
    outline: 2px solid var(--ex-accent);
    outline-offset: 2px;
}

.auth-brand :focus-visible {
    outline-color: var(--auth-panel-accent);
}

/* ============================================================= responsive */

@media (max-width: 991.98px) {
    .auth-split {
        grid-template-columns: 1fr;
        min-height: 100vh;
    }

    .auth-brand {
        padding: 28px 28px 30px;
    }

    .auth-brand__inner {
        max-width: none;
    }

    .auth-lede {
        padding: 14px 0 0;
        font-size: 16px;
    }

    .auth-meta {
        display: none;
    }

    .auth-sheet {
        right: -120px;
        bottom: auto;
        top: -30px;
        width: 320px;
    }

    .auth-panel {
        padding: 34px 24px 56px;
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .auth-brand {
        padding: 24px 20px 26px;
    }

    .auth-panel {
        padding: 30px 20px 48px;
    }

    .auth-title {
        font-size: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-body * {
        transition-duration: 0.01ms !important;
    }
}