/*
    NimbleAIPlayground — sign-in page.

    Ported from the "Nimbus Suite Logins" handoff. NimbusIndex90 keeps these rules inside
    wwwroot/css/workbench.css and the handoff's login-suite-additions.css appends to it; this
    application has no workbench.css, so the LOGIN block and the token set it depends on are
    carried across here verbatim and the suite additions are appended at the bottom.

    Loaded only by Views/Shared/_LayoutBlank.cshtml. site.css is deliberately NOT loaded
    alongside it: both declare --surface / --border on :root with different values, and the
    sign-in page wants the suite's light palette, not the app chrome's.
*/

/* ============================== TOKENS ============================== */
:root {
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --bg:#EEF3F9; --surface:#FFFFFF; --surface2:#F6FAFD; --surface3:#EDF3F9;
    --border:#DBE6F1; --border2:#C2D4E6;
    --text:#0C2340; --text2:#4B5F79; --text3:#7A8DA5;
    --brand:#0E76BC; --brand700:#0A5A92; --brand050:#E9F3FB; --brand100:#D2E7F7;
    --danger:#D2352C; --danger050:#FDECEB;
}

* { box-sizing:border-box; }

/*
    Almost everything on this page is display:flex, and an author rule beats the UA stylesheet's
    [hidden] { display:none }. Without this the JS that swaps the credentials block for the OTP
    step would set the attribute and nothing would happen.
*/
[hidden] { display:none !important; }

html, body {
    margin:0; height:100%;
    font-family:var(--sans); color:var(--text); background:var(--bg);
    -webkit-font-smoothing:antialiased;
}

input, button, select, textarea { font-family:var(--sans); }
a { color:var(--brand); text-decoration:none; }
a:hover { color:var(--brand700); text-decoration:underline; }

@keyframes ni-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ============================== LOGIN ============================== */
.ni-login { display:grid; grid-template-columns:1fr 520px; min-height:100vh; background:#04203A; }
@media (max-width: 900px) { .ni-login { grid-template-columns:1fr; } .ni-login-art { display:none; } }

.ni-login-art { position:relative; overflow:hidden; }
.ni-login-art canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.ni-login-scrim {
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(4,22,40,.55) 0%, rgba(4,22,40,0) 45%, rgba(4,22,40,.35) 100%);
}
.ni-login-art-inner {
    position:relative; height:100%;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:44px 56px; color:#fff;
}
/*
    align-self is load-bearing: this sits in a flex-direction:column parent, whose default
    align-items:stretch would run the white plate the full width of the hero.
*/
.ni-login-mark {
    align-self:flex-start;
    background:#fff; border-radius:10px; padding:8px 12px;
    display:inline-flex; align-items:center; box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.ni-login-mark img { height:22px; width:auto; display:block; }
.ni-login-eyebrow {
    font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
    color:rgba(180,222,255,.85); margin-bottom:18px;
}
.ni-login-art h1 {
    font-size:52px; line-height:1.05; letter-spacing:-.028em; font-weight:650;
    margin:0 0 18px; text-wrap:balance;
}
.ni-login-art p {
    font-size:17px; line-height:1.6; color:rgba(214,235,252,.82); margin:0; text-wrap:pretty;
}
.ni-login-host { font-size:12.5px; color:rgba(170,205,235,.6); letter-spacing:.02em; }

.ni-login-form {
    background:var(--surface);
    display:flex; align-items:center; justify-content:center;
    padding:48px 56px;
}
.ni-login-box { width:100%; max-width:376px; animation:ni-rise .5s ease both; }
.ni-login-box h2 {
    font-size:29px; line-height:1.15; letter-spacing:-.02em; font-weight:640; margin:0 0 8px;
}
.ni-login-lede { font-size:14.5px; line-height:1.55; color:var(--text2); margin:0 0 30px; }
.ni-login-field { display:flex; flex-direction:column; gap:7px; }
.ni-login-field span { font-size:12.5px; font-weight:640; letter-spacing:.01em; color:var(--text); }
.ni-login-field input {
    height:46px; padding:0 14px; font-size:15px; color:var(--text);
    background:var(--surface2); border:1.5px solid var(--border2); border-radius:10px;
    outline:none; transition:border-color .15s, box-shadow .15s;
}
.ni-login-field input:focus {
    border-color:var(--brand); box-shadow:0 0 0 4px var(--brand050); background:var(--surface);
}
.ni-login-submit {
    height:48px; margin-top:6px; width:100%;
    background:var(--brand); color:#fff; border:none; border-radius:10px;
    font-size:15.5px; font-weight:650; letter-spacing:.01em; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:9px;
    box-shadow:0 6px 18px rgba(14,118,188,.28);
    transition:background .15s, transform .1s;
}
.ni-login-submit:hover { background:var(--brand700); }
.ni-login-submit:active { transform:translateY(1px); }
/* Single sign-on, below the password form. Secondary styling deliberately: most reviewers use a
   password, and SSO is the alternative rather than the headline. */
.ni-login-or {
    display:flex; align-items:center; gap:12px;
    margin:22px 0 18px; color:var(--text3); font-size:12.5px;
}
.ni-login-or::before, .ni-login-or::after {
    content:""; flex:1 1 auto; height:1px; background:var(--border);
}

.ni-login-sso {
    height:46px; width:100%;
    display:flex; align-items:center; justify-content:center; gap:9px;
    background:var(--surface2); color:var(--text);
    border:1.5px solid var(--border2); border-radius:10px;
    font-size:14.5px; font-weight:640; text-decoration:none;
    transition:border-color .15s, background .15s;
}
.ni-login-sso:hover {
    border-color:var(--brand); background:var(--brand050);
    color:var(--brand); text-decoration:none;
}

/* More than one identity provider gets more than one button. Stacked at the divider's own
   rhythm so a second provider reads as another option, not a second design. */
.ni-login-sso-group { display:flex; flex-direction:column; gap:10px; }

.ni-login-note {
    margin-top:34px; padding-top:22px; border-top:1px solid var(--border);
    display:flex; align-items:center; gap:9px;
    font-size:12.5px; color:var(--text3); line-height:1.5;
}
.ni-alert {
    display:flex; gap:10px; align-items:flex-start;
    background:var(--danger050); border:1px solid var(--danger);
    border-radius:10px; padding:11px 13px; margin-bottom:20px;
    font-size:13.5px; line-height:1.5; color:var(--danger);
}

/* ===================== LOGIN — suite additions =====================
   From the handoff's login-suite-additions.css. Nothing above is modified.
*/

/* The art concept sets its own gradient inside the canvas; this is the colour behind it while the
   first frame paints, and on the reduced-motion path if the script never loads at all. */
.ni-login[data-art="narwhal"] { background:#04203A; }
.ni-login[data-art="kelp"]    { background:#062B31; }
.ni-login[data-art="aurora"]  { background:#0A1E3C; }
.ni-login[data-art="swarm"]   { background:#052034; }

/* Product wordmark beside the Nimble logo, when Branding:Wordmark is set. */
.ni-login-wordmark {
    align-self:flex-start;
    display:flex; align-items:center; gap:11px;
}
.ni-login-wordmark .ni-login-mark { align-self:auto; }
.ni-login-wordmark span {
    font-size:13px; font-weight:640; letter-spacing:.02em;
    color:rgba(214,235,252,.9);
}

/* Nimble AI Playground — paint-in colour behind the canvas, matching the swing gradient's deep
   end. Form controls keep the suite's standard blue accent from workbench.css. */
.ni-login[data-art="swing"] { background:#062B30; }

/* ===================== LOGIN — Playground additions =====================
   Not in the handoff. This application's sign-in is a fetch against /api/auth/login rather than
   a form post, and accounts with two-factor enabled answer an OTP challenge before a token is
   issued. The handoff has no slot for that second step, so it gets one here, styled in the same
   language as the credentials block it replaces.
*/

/* The OTP panel swaps in where the credentials block was; same rise as the box itself so the
   step change reads as movement rather than a repaint. */
.ni-login-step { animation:ni-rise .3s ease both; }

.ni-login-otp-hint {
    font-size:13.5px; line-height:1.55; color:var(--text2); margin:0 0 18px;
}

/* Ghost button for "Back to sign in" — a way out of the OTP step that does not compete with
   Verify for the eye. */
.ni-login-ghost {
    height:44px; width:100%; margin-top:10px;
    background:transparent; color:var(--text3);
    border:1.5px solid var(--border); border-radius:10px;
    font-size:14px; font-weight:640; cursor:pointer;
    transition:border-color .15s, color .15s;
}
.ni-login-ghost:hover { border-color:var(--border2); color:var(--text2); }

.ni-login-submit:disabled,
.ni-login-ghost:disabled { opacity:.55; cursor:not-allowed; }
.ni-login-submit:disabled:hover { background:var(--brand); }