/*
    Public pre-app styling (signup / login / onboarding / logout). Self-contained and
    deliberately independent of the application's root.css / sf.css — it mirrors the
    marketing website (C:\Development\Sysflows Website\4) so the pages outside the app
    share its look: dark near-black canvas, Sora display / Inter body, orange accent,
    gradient pill buttons, faint grid + aurora glow. No Bootstrap; hand-rolled CSS.

    The .mk-* class contract is unchanged, so the Razor pages need no markup edits.
*/
:root {
    /* ---- Dark canvas (cool near-black) — matches the site ---- */
    --mk-bg:      #0e0e11;
    --mk-bg-1:    #16161b;   /* raised surface / cards */
    --mk-bg-2:    #1c1c23;
    --mk-bg-3:    #26262f;   /* inputs / inset */

    /* ---- Hairlines ---- */
    --mk-line:    rgba(255, 255, 255, .08);
    --mk-line-2:  rgba(255, 255, 255, .14);
    --mk-line-3:  rgba(255, 255, 255, .22);

    /* ---- Text ---- */
    --mk-ink:     #f4f4f7;
    --mk-muted:   #c8c9d2;
    --mk-faint:   #8d8e9c;

    /* ---- Accent system (single swap point, mirrors the site) ---- */
    --mk-accent:     #ff7a1a;
    --mk-accent-2:   #ffb066;
    --mk-accent-rgb: 255 122 26;
    --mk-primary-ink: #ffffff;
    --mk-btn:    linear-gradient(-156deg, #e85f12 0%, #ff7a1a 55%, #ffb066 100%);
    --mk-btn-hi: linear-gradient(-156deg, #ff7a1a 0%, #ff9542 55%, #ffc488 100%);

    --mk-ok:  #6fd39a;
    --mk-bad: #ff8a7a;

    /* ---- Type ---- */
    --mk-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mk-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --mk-radius:    18px;
    --mk-radius-lg: 26px;
    --mk-radius-sm: 11px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body.mk {
    margin: 0;
    font-family: var(--mk-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--mk-muted);
    background: var(--mk-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* faint global grid masked toward the top + an accent vignette (the site's chrome) */
body.mk::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        linear-gradient(to right, rgba(255, 255, 255, .018) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(to bottom, rgba(255, 255, 255, .018) 1px, transparent 1px) 0 0 / 64px 64px;
    -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 75%);
}
body.mk::after {
    content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
    background: radial-gradient(70% 45% at 50% -8%, rgb(var(--mk-accent-rgb) / .14), transparent 60%);
}

::selection { background: var(--mk-accent); color: #1a0d03; }

/* ---- top bar (sticky, blurred — like .site-header) ---- */
.mk-top {
    position: sticky; top: 0; z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    min-height: 64px;
    border-bottom: 1px solid var(--mk-line);
    background: rgba(12, 12, 15, .6);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
}

.mk-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--mk-ink);
    flex: 0 0 auto;
}
.mk-brand-logo { display: block; height: 21px; width: auto; }

.mk-top-link {
    text-decoration: none;
    color: var(--mk-muted);
    font-weight: 450;
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    transition: color .15s ease, background-color .15s ease;
}
.mk-top-link:hover { color: var(--mk-ink); background: rgba(255, 255, 255, .05); }

/* ---- main two-column layout ---- */
.mk-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(32px, 6vw, 72px) 32px 72px;
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 64px;
    align-items: center;
}

.mk-hero h1 {
    font-family: var(--mk-display);
    font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 700;
    color: var(--mk-ink);
    margin: 0 0 18px;
}

.mk-hero p.lede {
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--mk-muted);
    margin: 0 0 32px;
    max-width: 42ch;
}

.mk-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mk-points li { display: flex; gap: 13px; align-items: flex-start; color: var(--mk-ink); }
.mk-points li::before {
    content: "";
    flex: 0 0 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: rgb(var(--mk-accent-rgb) / .14);
    border: 1px solid rgb(var(--mk-accent-rgb) / .4);
    -webkit-mask: none;
            mask: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffb066' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 13px;
    background-repeat: no-repeat;
}
.mk-points strong { font-weight: 600; color: var(--mk-ink); }
.mk-points span { display: block; color: var(--mk-faint); font-size: 14px; }

/* ---- form card ---- */
.mk-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 42%),
        var(--mk-bg-1);
    border: 1px solid var(--mk-line-2);
    border-radius: var(--mk-radius-lg);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
    padding: 32px;
}

.mk-card h2 {
    font-family: var(--mk-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--mk-ink);
    margin: 0 0 6px;
}
.mk-card .sub { color: var(--mk-faint); font-size: 14px; margin: 0 0 22px; }

.mk-field { margin-bottom: 16px; }
.mk-field label { display: block; font-size: 13px; font-weight: 500; color: var(--mk-ink); margin-bottom: 6px; }

.mk-input {
    width: 100%;
    padding: 12px 13px;
    font: inherit;
    font-size: 15px;
    color: var(--mk-ink);
    background: var(--mk-bg-3);
    border: 1px solid var(--mk-line-2);
    border-radius: var(--mk-radius-sm);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mk-input:focus { border-color: var(--mk-accent); box-shadow: 0 0 0 3px rgb(var(--mk-accent-rgb) / .18); }
.mk-input::placeholder { color: var(--mk-faint); }

/* native select arrow themed for the dark canvas */
select.mk-input {
    appearance: none; -webkit-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238d8e9c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
}
select.mk-input option { background: var(--mk-bg-2); color: var(--mk-ink); }

/* slug input with the host suffix */
.mk-slug { display: flex; align-items: stretch; border: 1px solid var(--mk-line-2); border-radius: var(--mk-radius-sm); overflow: hidden; background: var(--mk-bg-3); }
.mk-slug:focus-within { border-color: var(--mk-accent); box-shadow: 0 0 0 3px rgb(var(--mk-accent-rgb) / .18); }
.mk-slug input { flex: 1; min-width: 0; border: 0; outline: none; padding: 12px 13px; font: inherit; font-size: 15px; color: var(--mk-ink); background: transparent; }
.mk-slug input::placeholder { color: var(--mk-faint); }
.mk-slug .prefix { display: flex; align-items: center; padding: 0 12px; color: var(--mk-faint); font-size: 13px; background: rgba(255, 255, 255, .03); border-left: 1px solid var(--mk-line-2); }

.mk-hint { font-size: 12.5px; margin-top: 6px; min-height: 16px; color: var(--mk-faint); }
.mk-hint.ok { color: var(--mk-ok); }
.mk-hint.bad { color: var(--mk-bad); }

.mk-btn {
    width: 100%;
    margin-top: 8px;
    padding: 13px 18px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--mk-primary-ink);
    background: var(--mk-btn);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgb(var(--mk-accent-rgb) / .35), 0 8px 28px -8px rgb(var(--mk-accent-rgb) / .65);
    transition: background .18s ease, box-shadow .25s ease, transform .08s ease;
}
.mk-btn:hover { background: var(--mk-btn-hi); box-shadow: 0 0 0 1px rgb(var(--mk-accent-rgb) / .5), 0 14px 44px -8px rgb(var(--mk-accent-rgb) / .9); }
.mk-btn:active { transform: translateY(1px); }
.mk-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

.mk-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: var(--mk-radius-sm);
    font-size: 14px;
    background: rgba(255, 107, 90, .1);
    border: 1px solid rgba(255, 107, 90, .35);
    color: #ffb3a8;
}

.mk-fineprint { margin-top: 18px; font-size: 13px; color: var(--mk-faint); text-align: center; }
.mk-fineprint a { color: var(--mk-accent-2); text-decoration: none; }
.mk-fineprint a:hover { text-decoration: underline; }

/* ---- centered single-card variant (login, onboarding, confirmation) ---- */
.mk-main.center {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: clamp(40px, 9vh, 96px);
}
.mk-main.center .mk-card { width: 100%; max-width: 430px; }

/* server-side validation message under a field */
.mk-err { display: block; color: var(--mk-bad); font-size: 12.5px; margin-top: 6px; }

/* "remember me" style checkbox row */
.mk-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: -2px 0 18px;
    font-size: 14px;
    color: var(--mk-muted);
    cursor: pointer;
}
.mk-check input { width: 16px; height: 16px; accent-color: var(--mk-accent); margin: 0; }

/* secondary (ghost) button — placed after .mk-btn so its rules win */
.mk-btn-ghost { background: rgba(255, 255, 255, .03); color: var(--mk-ink); border: 1px solid var(--mk-line-2); box-shadow: none; }
.mk-btn-ghost:hover { background: rgba(255, 255, 255, .06); border-color: var(--mk-line-3); box-shadow: none; }

/* a secondary button used inline after the primary (e.g. "Sign in with SSO") */
.mk-btn-secondary { margin-top: 10px; background: rgba(255, 255, 255, .03); color: var(--mk-ink); border: 1px solid var(--mk-line-2); box-shadow: none; }
.mk-btn-secondary:hover { background: rgba(255, 255, 255, .06); border-color: var(--mk-line-3); box-shadow: none; }

/* ---- confirmation / signed-out page ---- */
.mk-done {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 42%),
        var(--mk-bg-1);
    border: 1px solid var(--mk-line-2);
    border-radius: var(--mk-radius-lg);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
    padding: 48px 40px;
}
.mk-done .mk-mark {
    width: 58px; height: 58px; margin: 0 auto 20px;
    border-radius: 50%;
    background: rgb(var(--mk-accent-rgb) / .12);
    border: 1px solid rgb(var(--mk-accent-rgb) / .4);
    display: flex; align-items: center; justify-content: center;
}
.mk-done .mk-mark svg { width: 28px; height: 28px; fill: var(--mk-accent-2); }
.mk-done h1 { font-family: var(--mk-display); font-size: 1.7rem; font-weight: 600; letter-spacing: -.025em; color: var(--mk-ink); margin: 0 0 12px; }
.mk-done p { color: var(--mk-muted); margin: 0 0 8px; }
.mk-done .email { color: var(--mk-ink); font-weight: 600; }
.mk-done .mk-btn { width: auto; display: inline-block; margin-top: 22px; padding-left: 30px; padding-right: 30px; }

/* ---- footer ---- */
.mk-foot {
    flex-shrink: 0;
    text-align: center;
    padding: 24px;
    color: var(--mk-faint);
    font-size: 12.5px;
    border-top: 1px solid var(--mk-line);
}

/* ---- responsive ---- */
@media (max-width: 880px) {
    .mk-top { padding: 14px 20px; }
    .mk-main { grid-template-columns: 1fr; gap: 36px; padding-left: 20px; padding-right: 20px; }
    .mk-hero { order: 2; }
    .mk-card { order: 1; }
}