/* =============================================================================
   register.css — the ONLY stylesheet loaded by /Register.
   =============================================================================

   WHY THIS FILE EXISTS
   --------------------
   /Register is the one surface in the estate reached BEFORE an account exists.
   It used to link the full Metronic app bundle — plugins.bundle.css,
   style.bundle.css, fifteen-dark.css, the Font Awesome face and site.css, plus
   plugins.bundle.js and scripts.bundle.js — roughly 5.9 MB, to render six inputs
   and a submit button. None of it was doing load-bearing work here:

     * The page already rendered with Layout = null, so it never had the app
       shell (sidebar, header user menu, module switcher, assistant launcher,
       ticket entry) to begin with. The bundles were dressing an empty stage.
     * The JS did nothing at all. There is no jQuery-unobtrusive validation in
       this estate and the form carries `novalidate`, so validation has always
       been a server round-trip; no Metronic component is initialised on the
       page.
     * The --fx-* branding tokens were never actually defined here. They are
       emitted by the _BrandStyle partial, which only the LAYOUTS render — and
       this page has no layout. Every var(--fx-*, fallback) on it was silently
       resolving to its hardcoded fallback.

   So this file replaces the bundles rather than sitting on top of them.

   THEME — read this before adding a toggle
   ----------------------------------------
   There is deliberately NO theme switching here, and that is not an oversight.
   The light/dark setting in this product is stored PER USER. A visitor to this
   page has no account, so there is nothing to read and nothing a toggle could
   save. The three honest options were:

     1. One fixed look, decided by us.                       <-- chosen
     2. Follow the operating system via prefers-color-scheme.
     3. Render a toggle that persists nowhere.

   (3) is a control that lies about what it does, so it is out. (2) was
   rejected on purpose: this page is the continuation of the public marketing
   site, and that site has one deliberate look — an OS-driven light variant
   would be a design nobody has drawn and nobody has checked. (1) it is. The
   look is applied by the SERVER, in the markup, via data-theme on <html> plus
   a matching color-scheme declaration, so there is no client-side decision to
   make and therefore no flash of the wrong theme at any point.

   `color-scheme: dark` matters as much as the colours: it is what makes the
   browser paint native UI — the select popup, scrollbars, focus rings, form
   autofill — to match, instead of dropping a white dropdown onto a dark page.

   SCOPE
   -----
   This file styles /Register and nothing else. It is not shared, not imported
   anywhere, and must not grow into a second theme library. If a rule here is
   wanted elsewhere, copy it — do not link this file from another page.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   THE PALETTE AND TYPE SCALE — the one place to change how this page looks.
   Every value below is declared here and referenced by name; no raw hex appears
   anywhere else in this file.
   -------------------------------------------------------------------------- */
:root {
    /* ---------------------------------------------------------------------
       PROVENANCE OF THESE VALUES — read before changing them.

       These are the estate's DOCUMENTED brand-dark values, taken from
       Fifteen.Web.Shared/Branding/ChromeTokens.cs (the DefaultDark set). They
       are not invented here and they are not eyeballed: --rg-bg is
       --fx-body-bg, --rg-surface is --fx-card-bg, --rg-border is
       --fx-card-border, --rg-text is --fx-text, --rg-text-muted is
       --fx-text-muted, --rg-primary is --fx-primary, and the four semantic
       colours are the --fx-* semantics verbatim. Copied rather than linked,
       because those tokens are only emitted by the _BrandStyle partial that
       the LAYOUTS render, and this page has no layout.

       The effect is that this page renders in exactly the colours it rendered
       in before — the change under it is structural, not visual.

       PARTIALLY SUPERSEDED — see --rg-bg below.

       OUTSTANDING: Brad's direction is that this page should instead follow
       the public marketing site at the /nexuss/ path of the 15group site,
       because that is where a visitor arrives from. Those values are NOT in
       here yet, apart from the ONE named below, and nothing else claims to be
       them. The site is served through a Cloudflare bot challenge that refuses
       this host, and its Elementor install uses internal CSS embedding, so
       there is no stylesheet file to read either — the design exists only
       inside the challenged HTML. When the real values are available, THIS
       BLOCK is the only thing that needs to change; no rule below hardcodes a
       colour.
       --------------------------------------------------------------------- */

    /* Ground and surfaces */

    /* --rg-bg is the FIRST CONFIRMED VALUE of the marketing palette above.
       Brad supplied it directly (2026-08-11: "backhground colour should be
       #00091d") after the Cloudflare challenge blocked reading it from the
       site. It is his value, not the ChromeTokens --fx-body-bg (#15171c) the
       rest of this block still carries, so it is the one line here whose
       provenance is Brad rather than the estate tokens.

       IT IS ONE VALUE, NOT THE SET. The surfaces, ink and accents below are
       still the estate defaults, and the marketing palette for those is still
       unknown. Do not infer the rest from this. */
    --rg-bg: #00091d;

    /* Retuned WITH --rg-bg, not independently. This is the soft wash behind the
       header; it has to stay in the same hue family as the ground or it reads
       as a grey smear on navy rather than depth. The old pair lifted relative
       luminance by 0.0048 (#15171c -> #1b1e2b); this pair lifts by 0.0052, so
       the effect is the same strength, moved into navy. */
    --rg-bg-glow: #0a1433;
    --rg-surface: #1e1e2d;
    --rg-surface-2: #191a27;
    --rg-border: #2b2b40;
    --rg-border-strong: #3a3a55;

    /* Ink */
    --rg-text: #f5f8fa;
    --rg-text-muted: #9899ac;
    --rg-text-dim: #787887;
    --rg-heading: #f5f8fa;

    /* Accent */
    --rg-primary: #009ef7;
    --rg-primary-hover: #008ede;
    --rg-primary-ink: #ffffff;
    --rg-accent: #7239ea;

    /* Semantic */
    --rg-success: #50cd89;
    --rg-warning: #ffc700;
    --rg-danger: #f1416c;

    /* Focus */
    --rg-focus: #3699ff;
    --rg-focus-ring: rgba(0, 158, 247, 0.3);

    /* Alpha tints, derived from the accents above so a palette change carries
       through instead of leaving stale washes behind. */
    --rg-primary-wash: rgba(0, 158, 247, 0.08);
    --rg-primary-wash-2: rgba(0, 158, 247, 0.16);
    --rg-primary-edge: rgba(0, 158, 247, 0.28);
    --rg-danger-wash: rgba(241, 65, 108, 0.1);
    --rg-danger-edge: rgba(241, 65, 108, 0.35);
    --rg-success-wash: rgba(80, 205, 137, 0.14);
    --rg-warning-wash: rgba(255, 199, 0, 0.14);

    /* Type. Poppins first because that is the estate's brand face — Metronic
       sets --bs-font-sans-serif: Poppins, Helvetica, "sans-serif" and this page
       inherited it. NOTHING in this estate loads Poppins as a webfont, here or
       anywhere else, so on most machines it has always resolved to the fallback;
       the only change is that the fallback is now a real system stack instead of
       bare `sans-serif`. No external font request is made from this page. */
    --rg-font: Poppins, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --rg-fs-hero: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
    --rg-fs-card-title: 1.2rem;
    --rg-fs-body: 1rem;
    --rg-fs-small: 0.875rem;
    --rg-fs-xs: 0.8125rem;

    /* Shape */
    --rg-radius: 14px;
    --rg-radius-sm: 10px;
    --rg-radius-pill: 999px;
    --rg-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    --rg-maxw: 940px;
    --rg-gutter: 24px;

    /* Brand lockup size. The asset is the platform's own 200x50 logo, so these
       are widths rather than heights — the intrinsic aspect ratio supplies the
       height and nothing has to be kept in sync by hand. Kept at or below the
       source width so it is never upscaled; the estate header renders the same
       asset at up to 170px, so 152px here is no softer than the rest of the
       estate on a high-DPI screen. */
    --rg-logo-w: 152px;
    --rg-logo-w-sm: 124px;

    color-scheme: dark;
}

/* -----------------------------------------------------------------------------
   Reset — only what this page actually uses.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background-color: var(--rg-bg);
    /* A single soft wash behind the header so the page has depth without an
       image request. Fixed so it does not repeat as the form scrolls. */
    background-image: radial-gradient(ellipse 90% 60% at 50% -10%, var(--rg-bg-glow) 0%, transparent 70%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--rg-text);
    font-family: var(--rg-font);
    font-size: var(--rg-fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2 { margin: 0; line-height: 1.2; color: var(--rg-heading); }
p { margin: 0; }

:focus-visible {
    outline: 2px solid var(--rg-focus);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */
.rg-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.rg-shell {
    width: 100%;
    max-width: var(--rg-maxw);
    margin: 0 auto;
    padding: 0 var(--rg-gutter);
}

.rg-shell-narrow { max-width: 820px; }

.rg-header { padding: 28px 0; }

/* THE BRAND LOCKUP.
   This is the platform's OWN logo, not a drawing of it. The estate keeps its
   brand assets as uploads on the BrandingAssets substrate, served from
   /branding/asset/{name}; the single PLATFORM row of BrandProfiles points its
   DarkLogoAssetPath (and LightLogo, and LoginLogo) at the 200x50 NEXUSS
   wordmark, which is the asset inlined in the markup as a data URI. There is
   no SVG of it anywhere in this repository — the estate has no vector brand
   asset at all — so a raster is not a shortcut here, it is the only canonical
   form that exists.

   Inlined rather than linked because this page makes exactly two requests and
   is meant to keep making two. Quantised to a 32-colour palette first, which
   takes it from 3,479 bytes to 840 (~1.1 KB base64) with no visible change:
   the artwork is two flat colours, white and #009ef7, over transparency.

   It is an <img> with a real alt rather than a CSS background, deliberately —
   the logo is the only thing on this page that identifies the product, so it
   should not disappear if the one stylesheet fails to arrive.

   NOTE FOR REUSE: the wordmark is WHITE ink (the "NE") plus #009ef7 (the mark
   and the "USS") on transparency. It is a DARK-BACKGROUND asset. On a light
   background the "NE" is invisible — which is exactly why the logo looked like
   it read "USS" when it was viewed on white. Do not lift this rule onto a light
   surface without swapping the asset. */
.rg-brand {
    display: inline-flex;
    align-items: center;
}

.rg-brand-logo {
    display: block;
    width: var(--rg-logo-w-sm);
    /* Height comes from the asset's own aspect ratio, so there is nothing to
       keep in sync, and `auto` cannot letterbox or stretch the mark. */
    height: auto;
}

@media (min-width: 768px) {
    .rg-brand-logo { width: var(--rg-logo-w); }
}

.rg-main {
    flex: 1 0 auto;
    padding: 16px 0 72px;
}

.rg-footer {
    padding: 24px 0 32px;
    border-top: 1px solid var(--rg-border);
}

.rg-footer-text {
    color: var(--rg-text-dim);
    font-size: var(--rg-fs-xs);
}

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.rg-hero {
    text-align: center;
    margin-bottom: 40px;
}

.rg-hero-title {
    font-size: var(--rg-fs-hero);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
}

.rg-hero-text {
    color: var(--rg-text-muted);
    font-size: 1.0625rem;
    max-width: 42rem;
    margin: 0 auto;
}

/* -----------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.rg-card {
    background-color: var(--rg-surface);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius);
    box-shadow: var(--rg-shadow);
    margin-bottom: 22px;
}

.rg-card-head {
    padding: 22px 26px 0;
}

.rg-card-title {
    font-size: var(--rg-fs-card-title);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.rg-card-note {
    margin-top: 5px;
    color: var(--rg-text-dim);
    font-size: var(--rg-fs-small);
}

.rg-card-body { padding: 20px 26px 26px; }

/* -----------------------------------------------------------------------------
   Grid and fields
   -------------------------------------------------------------------------- */
.rg-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

.rg-field { grid-column: span 12; display: flex; flex-direction: column; }

/* The two sign-in choices sit in adjacent grid cells with copy of different
   lengths. Without this the shorter card stops early and leaves a ragged gap
   beside the taller one; `flex: 1` makes the card fill its cell so the pair
   bottom out level. */
.rg-field > .rg-choice { flex: 1; }

@media (min-width: 768px) {
    .rg-span-5 { grid-column: span 5; }
    .rg-span-6 { grid-column: span 6; }
    .rg-span-7 { grid-column: span 7; }
}

.rg-label {
    display: block;
    margin-bottom: 7px;
    font-size: var(--rg-fs-small);
    font-weight: 600;
    color: var(--rg-text);
}

.rg-required::after {
    content: "*";
    margin-left: 4px;
    color: var(--rg-danger);
    font-weight: 700;
}

.rg-optional {
    color: var(--rg-text-dim);
    font-weight: 400;
}

.rg-input {
    width: 100%;
    padding: 12px 14px;
    background-color: var(--rg-surface-2);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-sm);
    color: var(--rg-text);
    font-family: inherit;
    font-size: var(--rg-fs-body);
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rg-input::placeholder { color: var(--rg-text-dim); }

.rg-input:hover { border-color: var(--rg-border-strong); }

.rg-input:focus {
    outline: none;
    border-color: var(--rg-primary);
    box-shadow: 0 0 0 3px var(--rg-focus-ring);
}

/* The chevron is drawn as a background image so the control needs no icon font
   and no JS. `appearance: none` is what stops the platform drawing its own. */
.rg-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239899ac' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}

.rg-error {
    display: block;
    margin-top: 6px;
    color: var(--rg-danger);
    font-size: var(--rg-fs-xs);
}

.rg-error:empty { display: none; }

.rg-error-block { margin-top: 14px; }

.rg-alert {
    margin-bottom: 22px;
    padding: 14px 18px;
    background-color: var(--rg-danger-wash);
    border: 1px solid var(--rg-danger-edge);
    border-radius: var(--rg-radius-sm);
    color: var(--rg-danger);
    font-size: var(--rg-fs-small);
}

.rg-alert ul { margin: 0; padding-left: 18px; }

/* -----------------------------------------------------------------------------
   The two sign-in choices
   -------------------------------------------------------------------------- */
.rg-choice {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px;
    background-color: var(--rg-surface-2);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

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

/* :has is what lets the whole card react to its own radio without any JS.
   Where it is unsupported the card simply stays in its resting style and the
   radio itself still shows the selection — the control never stops working. */
.rg-choice:has(.rg-radio:checked) {
    border-color: var(--rg-primary);
    background-color: var(--rg-primary-wash);
}

.rg-choice:has(.rg-radio:focus-visible) {
    outline: 2px solid var(--rg-focus);
    outline-offset: 2px;
}

.rg-choice-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.rg-radio {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--rg-primary);
    flex: none;
    cursor: pointer;
}

.rg-choice-name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--rg-heading);
}

.rg-badge {
    padding: 3px 10px;
    background-color: var(--rg-primary-wash-2);
    border-radius: var(--rg-radius-pill);
    color: var(--rg-focus);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.rg-choice-body {
    color: var(--rg-text-muted);
    font-size: var(--rg-fs-small);
}

.rg-p { display: block; margin-bottom: 12px; }

.rg-p-last { margin-bottom: 0; }

.rg-choice-body strong { color: var(--rg-text); }

.rg-choice-body em {
    color: var(--rg-text);
    font-style: italic;
}

.rg-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 22px;
    padding: 16px 18px;
    background-color: var(--rg-primary-wash);
    border: 1px solid var(--rg-primary-edge);
    border-radius: var(--rg-radius-sm);
    color: var(--rg-text-muted);
    font-size: var(--rg-fs-small);
}

.rg-note strong { color: var(--rg-text); }

.rg-note-icon {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 2px;
    fill: none;
    stroke: var(--rg-focus);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -----------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */
.rg-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    margin-top: 28px;
}

@media (min-width: 576px) {
    .rg-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.rg-link {
    color: var(--rg-text-dim);
    font-size: var(--rg-fs-xs);
    text-decoration: none;
}

.rg-link:hover {
    color: var(--rg-focus);
    text-decoration: underline;
}

.rg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 28px;
    background-color: var(--rg-primary);
    border: 1px solid var(--rg-primary);
    border-radius: var(--rg-radius-sm);
    color: var(--rg-primary-ink);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.rg-btn:hover {
    background-color: var(--rg-primary-hover);
    border-color: var(--rg-primary-hover);
}

.rg-btn:active { transform: translateY(1px); }

.rg-btn-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -----------------------------------------------------------------------------
   Outcome cards — confirmation and the circuit breaker
   -------------------------------------------------------------------------- */
.rg-outcome {
    padding: 52px 32px;
    text-align: center;
    margin-top: 32px;
}

.rg-outcome-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 22px;
    border-radius: 50%;
}

.rg-outcome-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rg-outcome-icon-ok { background-color: var(--rg-success-wash); }
.rg-outcome-icon-ok svg { stroke: var(--rg-success); }

.rg-outcome-icon-warn { background-color: var(--rg-warning-wash); }
.rg-outcome-icon-warn svg { stroke: var(--rg-warning); }

.rg-outcome-title {
    font-size: 1.65rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.rg-outcome-text {
    color: var(--rg-text-muted);
    font-size: 1.0625rem;
    max-width: 34rem;
    margin: 0 auto;
}

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