/* Generated from src/EvNext.DesignSystem — edit there, not here. */
/*
 * The login page's stylesheet.
 *
 * Plain CSS on purpose: Platform is a Razor app, and adding a Node build step to
 * a .NET service to render one form would be a bad trade. The values mirror
 * tokens.css so the login page and the portals agree.
 *
 * This page is the product's entire public surface, so it carries no product
 * name beyond the neutral "project quovadis" mark, no business-domain wording,
 * and no corporate colour.
 */
:root {
    color-scheme: light dark;
    --background: #F3F6F4;
    --foreground: #1D2126;
    --card: #FFFFFF;
    --muted-foreground: #606F7E;
    --primary: #0A0C0A;
    --primary-foreground: #FFFFFF;
    --accent: #EEF4F3;
    --accent-foreground: #297969;
    --heading: #21403D;
    --border: #E4E7E9;
    --input: #CFD4D8;
    --placeholder: #606F7E;
    --ring: #297969;
    --destructive: #A2412E;
    --secondary: #F2F3F5;
    --radius: 0.5rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #131313;
        --foreground: #FAFBFB;
        --card: #1D2126;
        --muted-foreground: #A8B4BE;
        --primary: #FAFBFB;
        --primary-foreground: #131313;
        --accent: #1F3B36;
        --accent-foreground: #9BC4BD;
        --heading: #CFE3DF;
        --border: #2A2F36;
        --input: #3A414A;
        --placeholder: #A8B4BE;
        --ring: #9BC4BD;
        --destructive: #E8907A;
        --secondary: #2A2F36;
    }
}

@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

body {
    margin: 0;
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: var(--background);
    color: var(--foreground);
    font-family: 'Inter Variable', 'Noto Sans', system-ui, sans-serif;
}

main {
    width: min(24rem, 90vw);
    /*
     * content-box would add this padding OUTSIDE the width, making the card
     * 24rem + 4rem and overflowing any viewport narrower than 28rem — the
     * sign-in page scrolled sideways on a phone. Pre-dates the landing page;
     * found by product review 2026-10-09.
     */
    box-sizing: border-box;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

/*
 * The wide shell, for a page that is a landing page rather than a single task.
 * Registration is its only user; every other page keeps the centred card above.
 *
 * `place-items: center` on body centres a grid item by shrinking it, which is
 * exactly wrong for a full-bleed layout — hence `stretch` and `align-content`
 * rather than a second body rule.
 */
body:has(> .landing) {
    place-items: stretch;
    align-content: start;
}

.landing {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/*
 * The mark and the task label are one unit: the product name leads, the task
 * answers it. They were a step apart on the scale and the task carried the
 * heavier weight, so the two read as rivals rather than as title and subtitle.
 */
.brand {
    margin: 0 0 0.35rem;
    text-align: center;
    color: var(--foreground);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.task {
    margin: 0 0 1.75rem;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--muted-foreground);
}

/*
 * Field styling follows the onboarding mock: a 12px label above a white box with
 * generous padding, rather than the 14px label and tight box this had before.
 */
label {
    display: block;
    margin-block: 1rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.333;
    color: var(--foreground);
}

/*
 * The required marker. The mock colours it with the same value as an error, which
 * is the one thing on the field that ever turns red — so an asterisk in that colour
 * reads as "this one matters" rather than "this one is wrong".
 */
.required {
    color: var(--destructive);
}

input {
    width: 100%;
    padding: 0.75rem 1rem;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--foreground);
    background: var(--card);
    border: 1px solid var(--input);
    border-radius: var(--radius);
}

input::placeholder { color: var(--placeholder); }

/*
 * A disabled field must LOOK disabled. Registration ships its fields inert until
 * the backend exists (the 2026-10-09 spec's §5), and while they rendered as
 * ordinary white boxes a reviewer clicked one, typed a full name, saw nothing
 * appear, and concluded the site was broken rather than not-yet-open. "Looks
 * alive, is dead" is the one state a form must never have.
 *
 * The same tokens as the disabled button, so the whole form reads as one
 * unavailable unit; both pairs are contrast-checked.
 */
input:disabled {
    color: var(--muted-foreground);
    background: var(--secondary);
    cursor: not-allowed;
}

/* The label of a disabled field, so the pairing does not look half-applied. */
label:has(+ input:disabled) { color: var(--muted-foreground); }

/*
 * Kept deliberately. The mock sets `outline-none` on its inputs and shows no focus
 * state at all — on the product's one public form, that would leave a keyboard user
 * with no way to tell where they are. Everything else here follows the mock; this
 * does not.
 */
input:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

button {
    margin-top: 1.5rem;
    padding: 0 1.25rem;
    height: 2.75rem;
    width: 100%;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-foreground);
    background: var(--primary);
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 150ms;
}

/*
 * The primary submit's hover, scoped so it cannot reach the buttons that only
 * borrow the <button> element. It replaced a `filter: brightness()` that was
 * harmless to those; this sets a real background, and the language switcher's
 * own rule then set the text to the SAME token — invisible text in both themes,
 * on every Platform page. Found by adversarial review.
 */
button:hover:not(:disabled):not(.language):not(.portal) { background: var(--foreground); }

/*
 * Registration does not submit yet (the 2026-10-09 spec's §5), so the page ships a
 * disabled submit. Styled as plainly unavailable rather than merely inert: a button
 * that looks live and answers nothing is worse than one that says so.
 *
 * Recoloured with tokens rather than dimmed with opacity. `opacity: 0.45` over the
 * near-black primary puts the white label at 3.12:1 — below AA, on the one control
 * the page is about. These two tokens are a checked pair in both modes.
 */
button:disabled {
    color: var(--muted-foreground);
    background: var(--secondary);
    border-color: var(--border);
    cursor: not-allowed;
}
button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.error { color: var(--destructive); font-size: 0.875rem; }

/*
 * The language switcher sits below the form: it is a control for the rare case, and
 * putting it first would make choosing a language look like step one of signing in.
 */
.languages {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.language {
    margin-top: 0;
    width: auto;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--muted-foreground);
    background: transparent;
    border-color: transparent;
}

.language-current {
    color: var(--foreground);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.language:hover { filter: none; color: var(--foreground); background: transparent; }

/* Secondary actions: the register link, the "back to sign in" link. */
.secondary {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.secondary a { color: var(--primary); }

.prose { margin: 0 0 0.75rem; font-size: 0.9375rem; line-height: 1.5; }
.prose.muted { color: var(--muted-foreground); font-size: 0.875rem; }

/* A link that reads as the page's primary action. */
.button-link {
    display: block;
    margin-top: 1.25rem;
    padding: 0.5rem 1rem;
    text-align: center;
    font-weight: 500;
    color: var(--primary-foreground);
    background: var(--primary);
    border-radius: var(--radius);
    text-decoration: none;
}

.button-link:hover { filter: brightness(1.08); }
.button-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Live password feedback. Hidden until the field has content and a rule is broken. */
.password-rules {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.8125rem;
    color: var(--destructive);
}

/*
 * The two portal boxes. A column, not a row: at 24rem the card is too narrow for two readable
 * boxes side by side, and a stack reads the same at every width.
 */
.portals { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }

.portal {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    text-align: left;
    color: var(--foreground);
    background: var(--card);
    border: 1px solid var(--border);
}

.portal:hover { filter: none; background: var(--card); border-color: var(--primary); }
.portal-current { border-color: var(--primary); }
.portal-title { font-weight: 600; font-size: 1rem; }
.portal-detail { font-weight: 400; font-size: 0.8125rem; color: var(--muted-foreground); }

/* ---------------------------------------------------------------------------
 * The registration chooser. Two boxes, one of them not yet available.
 *
 * Shares the shape of .portal — the post-login selector asks a similar-looking
 * question — but is its own set of classes: these are anchors leaving the
 * application, those are submit buttons writing a preference, and one will grow
 * a third box before the other does.
 * ------------------------------------------------------------------------ */

.choices { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }

.choice {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--foreground);
    text-align: left;
    text-decoration: none;
}

.choice:hover { filter: none; border-color: var(--primary); }
.choice:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.choice-title { font-weight: 600; font-size: 1rem; }
.choice-detail { font-weight: 400; font-size: 0.8125rem; color: var(--muted-foreground); }

/*
 * Not available yet. Dimmed rather than hidden: a buyer who reaches this page should
 * learn that the platform has a buyer side and that this is not the way in, instead of
 * wondering whether they chose the wrong product.
 *
 * It is a <span> with no href, so there is nothing to click. The cursor says so too —
 * the greying alone reads as "disabled" to a sighted mouse user, which is exactly the
 * group a styled-but-live link would mislead.
 */
.choice-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    background: transparent;
}

.choice-disabled:hover { border-color: var(--border); }