/*
 * AIM Login Page Styles
 * Created: May 2025
 * Purpose: Dedicated styling for login/authentication pages
 * Dependencies: theme-definitions.css (for color definitions)
 */

/* Login Layout Styles */
.login-body {
    background-color: var(--login-bg);
    color: var(--login-text);
    font-family: Roboto, sans-serif, "Century Gothic WGL";
    margin: 0;
    padding: 0 !important;
    padding-top: 0 !important; /* Override aim-consolidated body padding — login pages have no navbar */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* Login Container */
.login-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Login Card - 25% wider and responsive */
.login-card {
    background-color: var(--login-card-bg);
    border: 1px solid var(--login-border);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(30, 58, 95, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 625px; /* Increased from 500px by 25% */
    margin: 0 auto;
    text-align: center;
}

/* Logo and Title */
.login-header {
    margin-bottom: 30px;
}

.login-logo {
    display: block;
    margin: 0 auto 20px;
    height: 80px;
}

/* The INSCOPE 360 mark is single-colour black artwork, sized for the default light
   card (--login-card-bg #ffffff). Both dark themes darken that card, which would
   leave the mark black-on-dark, so flip it to white. Applies to the mark only —
   these auth pages never render customer artwork through .login-logo. */
[data-theme="aim-dark"] .login-logo,
[data-theme="cornerstone-dark"] .login-logo {
    filter: invert(1);
}

/* The wordmark is a long horizontal lockup, so the base height: 80px would run
   it off the card. Size it by WIDTH instead. Element+class specificity (0,1,1)
   so it also beats the height override in the mobile media query below.
   Aspect became 7.74:1 on 2026-08-27 when the viewBox grew to take in the
   vertical rule; letter size is unchanged, the box just carries the overhang. */
img.login-logo--wordmark {
    height: auto;
    width: min(15rem, 72%);
}

.login-title {
    color: var(--login-primary);
    font-size: var(--text-2xl);
    font-weight: 600;
    margin: 0;
}

/* Form Styling */
.login-form-floating {
    margin-bottom: 20px; /* Increased spacing */
    text-align: left;
}

.login-form-control {
    border: 1px solid var(--login-border);
    border-radius: 4px;
    padding: 12px;
    font-size: var(--text-lg);
    width: 100%;
    min-height: 44px; /* Touch-friendly minimum height */
}

    .login-form-control:focus {
        border-color: var(--login-primary);
        box-shadow: 0 0 0 0.2rem rgba(30, 58, 95, 0.25);
        outline: none;
    }

.login-form-label {
    color: var(--login-text-light);
    font-weight: 500;
}

/* Primary Login Button */
.login-btn-primary {
    background-color: var(--login-primary) !important;
    border-color: var(--login-primary) !important;
    color: white !important;
    font-weight: 600;
    padding: 14px 24px; /* Increased padding for better touch target */
    border-radius: 4px;
    font-size: var(--text-lg);
    transition: all 0.2s ease;
    width: 100%;
    margin-bottom: 8px; /* Reduced from 15px to 8px */
    min-height: 48px; /* Touch-friendly height */
    border: none;
    cursor: pointer;
}

    .login-btn-primary:hover {
        background-color: var(--login-primary, var(--action)) !important;
        border-color: var(--login-primary, var(--brand-border-on-surface)) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(30, 58, 95, 0.2);
    }

    .login-btn-primary:focus {
        box-shadow: 0 0 0 0.2rem rgba(30, 58, 95, 0.5);
    }

/* Microsoft Login Button */
.login-microsoft-btn {
    background: var(--login-card-bg, var(--raised));
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 12px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--ink);
    margin: 8px 0; /* Reduced from 15px to 8px */
    transition: all 0.2s ease;
    min-height: 48px; /* Touch-friendly height */
    font-size: var(--text-lg);
    cursor: pointer;
}

    .login-microsoft-btn:hover {
        background: var(--ground);
        border-color: var(--line);
        color: var(--ink);
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

/* Register Button */
.login-register-btn {
    background-color: var(--login-register-bg);
    color: white;
    border: none;
    padding: 14px 24px; /* Consistent with primary button */
    font-size: var(--text-lg);
    border-radius: 4px;
    width: 100%;
    margin: 8px 0; /* Reduced from 15px to 8px */
    transition: all 0.2s ease;
    font-weight: 600;
    min-height: 48px; /* Touch-friendly height */
    cursor: pointer;
}

    .login-register-btn:hover {
        background-color: var(--login-register-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 142, 112, 0.2);
    }

/* Register/Login cross-links - no color change on hover */
.login-register-link {
    color: var(--login-primary);
    text-decoration: none;
    font-weight: 600;
}

.login-register-link:hover {
    color: var(--login-primary);
    text-decoration: underline;
}

/* Login Links */
.login-links {
    margin-top: 20px;
}

    .login-links a {
        color: var(--login-primary);
        text-decoration: none;
        font-size: var(--text-base);
        line-height: 1.6;
    }

        .login-links a:hover {
            color: var(--login-secondary);
            text-decoration: underline;
        }

    .login-links p {
        margin: 8px 0;
    }

/* Login Footer */
.login-footer {
    background-color: var(--login-primary);
    color: white;
    text-align: center;
    padding: 15px;
    margin-top: auto;
    font-size: var(--text-base);
}

    .login-footer a {
        color: var(--login-accent);
    }

        .login-footer a:hover {
            color: white;
        }

/* Checkbox styling */
.login-checkbox {
    text-align: left;
    margin: 20px 0; /* Increased spacing */
}

.login-form-check-input {
    margin-right: 8px;
}

/* Validation messages */
.login-text-danger {
    color: var(--color-error-500);
    font-size: var(--text-base);
    margin-top: 5px;
}

/* Responsive Design - Mobile First */
@media (max-width: 480px) {
    .login-container {
        padding: 15px;
    }

    .login-card {
        padding: 30px 20px;
        margin: 0;
        border-radius: 4px;
    }

    .login-title {
        font-size: var(--text-2xl);
    }

    .login-logo {
        height: 60px;
    }

    .login-form-floating {
        margin-bottom: 15px;
    }

    .login-form-control {
        font-size: var(--text-lg); /* Prevent zoom on iOS */
        min-height: 48px; /* Touch-friendly */
    }

    .login-btn-primary,
    .login-microsoft-btn,
    .login-register-btn {
        min-height: 50px; /* Larger touch target on mobile */
        font-size: var(--text-lg);
        margin: 6px 0; /* Even tighter spacing on mobile */
    }
}

/* Tablet Portrait */
@media (min-width: 481px) and (max-width: 768px) {
    .login-container {
        padding: 20px;
    }

    .login-card {
        padding: 40px 30px;
        max-width: 625px; /* Consistent wider width */
        min-width: 481px; /* Consistent wider width */
    }

    .login-title {
        font-size: var(--text-2xl);
    }

    .login-logo {
        height: 70px;
    }
}

/* Tablet Landscape and Small Desktop */
@media (min-width: 769px) and (max-width: 1024px) {
    .login-card {
        max-width: 625px; /* Consistent wider width */
    }
}

/* Large Desktop */
@media (min-width: 1025px) {
    .login-card {
        max-width: 625px; /* Full width as requested */
        width: 425px; /* Full width as requested */
    }
}

/* ==========================================================================
   REGISTER PAGE STYLES
   RegisterForm.razor uses .register-* classes (RCL scoped CSS not bundling)
   ========================================================================== */

.register-card {
    max-width: 550px;
    margin: 3rem auto;
    padding: 2.5rem;
    background: var(--login-card-bg, var(--raised));
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.register-header {
    text-align: center;
    margin-bottom: 2rem;
}

.register-logo {
    max-width: 120px;
    height: auto;
    margin-bottom: 1.5rem;
}

.register-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--login-primary);
    margin: 0 0 0.5rem 0;
}

.register-subtitle {
    font-size: 1rem;
    color: var(--ink-muted);
    margin: 0;
}

.name-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.register-form-floating {
    margin-bottom: 1.25rem;
}

.register-form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--login-primary);
    font-size: 0.95rem;
}

.register-form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.register-form-control:focus {
    outline: none;
    border-color: var(--login-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.register-btn-primary {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background-color: var(--login-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.register-btn-primary:hover:not(:disabled) {
    background-color: var(--login-primary, var(--action));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

.register-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.external-register-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.external-register-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--login-primary);
    margin: 0 0 1rem 0;
    text-align: center;
}

.register-microsoft-btn,
.register-google-btn,
.register-facebook-btn,
.register-external-btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--login-card-bg, var(--raised));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.register-microsoft-btn:hover,
.register-external-btn:hover {
    background-color: var(--ground);
    border-color: var(--ink-muted);
}

.login-link-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    text-align: center;
}

.login-link-section a {
    color: var(--login-primary);
    text-decoration: none;
    font-weight: 600;
}

.login-link-section a:hover {
    text-decoration: underline;
}

.register-text-danger {
    color: var(--color-error-500);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.register-card hr {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid var(--line);
}

@media (max-width: 576px) {
    .register-card {
        margin: 1.5rem 1rem;
        padding: 1.5rem;
    }

    .name-fields {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* High DPI / Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .login-logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}


/* ==========================================================================
 * INSCOPE 360 sign-in — two-pane shell
 *
 * 2026-08-26 — replaces the navy .aim-login-page__* block that lived here.
 * Ground is black by brand mandate (V4 p.09: "Black is not a background, it
 * is the brand"), so this is deliberately NOT theme-aware — the --login-*
 * token cascade no longer applies to this surface.
 *
 * Tokens come from wwwroot/css/inscope-brand.css (loaded by _LoginLayout).
 * Shared primitives (.ins-input / .ins-btn / .ins-field / .ins-or / .ins-alert)
 * live there too; only layout is here.
 *
 * position: fixed escapes the .login-container centering in _LoginLayout and
 * covers the layout .login-footer — the same trick the old block used.
 * ========================================================================== */

.ins-login {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(380px, 41%) 1fr;
    background: var(--ins-ground);
    color: var(--ins-ink-body);
    font-family: var(--ins-font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

/* ---------- LEFT: form pane ---------- */

.ins-login__form-pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 3rem;
    /* Never scrolls. The pane is exactly one viewport tall and the form is
       sized to fit inside it, so overflow-y:auto was doing nothing but render
       a gutter down the middle of the page. Scrolling comes back only where
       the content genuinely cannot fit — the short-viewport and stacked
       breakpoints at the foot of this file. */
    overflow: hidden;
    position: relative;
    z-index: 2;
    /* Two layers of light, both as BACKGROUNDS rather than pseudo-elements.
       A pseudo-element sized past 100% inside this pane creates overflow, and
       the pane carries overflow-y:auto — which the spec computes to auto/auto,
       so it produced a scrollbar on both axes. Backgrounds cannot overflow.

       Layer 1 is the halo the form arrives in: closest-side against an
       88rem box, so the falloff stays circular instead of stretching to the
       pane's aspect. Layer 2 is the wide ambient lift. One gradient cannot be
       both focused and broad, hence two. */
    background:
        radial-gradient(closest-side,
            rgba(178, 204, 228, 0.20) 0%,
            rgba(132, 166, 200, 0.115) 30%,
            rgba(84, 116, 152, 0.05) 56%,
            rgba(0, 0, 0, 0) 100%) no-repeat 50% 50% / min(70rem, 240%) min(70rem, 200%),
        radial-gradient(96% 62% at 40% 48%,
            rgba(104, 128, 156, 0.10) 0%,
            rgba(64, 84, 108, 0.05) 48%,
            rgba(0, 0, 0, 0) 100%) no-repeat 0 0 / 100% 100%,
        var(--ins-ground);
}


/* THE COLOUR PULSE (James, 2026-08-27): "behind the one version of the truth,
   with the glow behind, we also have a changing glow of the different colours
   pulsing in and out — almost like the glow is reflecting the colours, to add
   more brightness to the page".

   A SECOND layer rather than an edit to the halo above, on purpose. The halo is
   the steady light the form sits in and it carries the page's legibility; if the
   cycling colour were baked into it, the form's contrast would rise and fall
   with the animation. This one only ever ADDS, sits underneath the form content
   (the form-inner is z-index 1), and is pure decoration.

   The four hues are the hero canvas's own tier palette (inscope-hero.js
   TIER_RGB), so the glow genuinely reflects what is moving on the right-hand
   stage instead of introducing a fifth colour story.

   ⚠ These are the CURRENT brand tiers, NOT the per-vertical colours James asked
   about separately (green / blue / red). Once that mapping is settled, swap the
   four stops here so the pulse and the verticals agree.

   ⚠ NOT VISUALLY VERIFIED — the Playwright browser profile was in use, so the
   timing, blur radius and alphas were chosen by reasoning, not by looking. If
   it is too subtle, raise the four conic alphas together; if it is too busy,
   lengthen ins-halo-sweep rather than reducing the colour.

   ⚠ PAINT COST — why this is a rotating conic and not a cross-fade.
   The first version animated `background-image` through four radial gradients.
   It read correctly but repaints the layer on EVERY frame, forever, on the
   first page of the product (the IDE linter flags exactly this). A conic
   gradient painted ONCE and then rotated animates `transform` and `opacity`
   only — both compositor-only — so the glow costs one paint for the life of
   the page. It is also the better effect: the colours sweep through each other
   the way reflected light does, rather than stepping between four states. */
.ins-login__form-pane::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(52rem, 165%);
    height: min(52rem, 165%);   /* square — a conic on an ellipse smears */
    pointer-events: none;
    mix-blend-mode: screen;     /* light adds to light — never darkens the form */

    /* The hero's four tier hues, held at low alpha and wrapped back to the
       first so there is no seam at 360deg. */
    background: conic-gradient(
        rgba(255,  95,  25, 0.20) 0deg,
        rgba(143, 201, 242, 0.20) 90deg,
        rgba(170, 196, 195, 0.20) 180deg,
        rgba(210, 230, 229, 0.20) 270deg,
        rgba(255,  95,  25, 0.20) 360deg);

    /* Blur turns the wheel into light. Masked to a soft disc so it fades out
       rather than ending on a hard square edge. */
    filter: blur(72px);
    -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,0.55) 55%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,0.55) 55%, transparent 100%);

    transform: translate(-50%, -50%) rotate(0deg);
    animation:
        ins-halo-sweep 48s linear infinite,
        ins-halo-breathe 11s ease-in-out infinite;
}

/* Rotation carries the colour change; the translate must be repeated or the
   layer jumps to the corner the moment the animation takes over. */
@keyframes ins-halo-sweep {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* "Pulsing in and out" — the brightness breathe, deliberately on a different
   period from the sweep so the two never settle into a visible loop. */
@keyframes ins-halo-breathe {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* The hero canvas already honours prefers-reduced-motion by holding a single
   still frame; a glow that keeps breathing beside it would undo that. */
@media (prefers-reduced-motion: reduce) {
    .ins-login__form-pane::after { animation: none; opacity: 0; }
}


.ins-login__form-inner {
    width: 100%;
    max-width: 25rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* Sits in the halo, not under it. */
    position: relative;
    z-index: 1;
}

.ins-login__brand {
    display: block;
    color: var(--ins-ink);
    /* Trimmed from 2.25rem on 2026-08-27: the wordmark's viewBox grew to take
       in the vertical rule, which overhangs the caps top and bottom, so the
       svg box now carries ~0.6rem of that gap itself. */
    margin-bottom: 1.6rem;
    flex-shrink: 0;
}

.ins-login__brand:focus-visible {
    outline: 2px solid var(--ins-action-hi);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Aspect is 15.9:1 — below ~174px of width the wordmark is unreadable and
   the mark alone should be used instead. 13rem keeps it clear of that. */
.ins-login__wordmark {
    display: block;
    width: 13rem;
    height: auto;
}

.ins-login__pitch { margin-bottom: 2rem; }

.ins-login__pitch .ins-eyebrow { margin-bottom: 0.75rem; }

.ins-login__headline { font-size: clamp(1.75rem, 2.6vw, 2.35rem); }

.ins-login__alert { margin-bottom: 1.25rem; }

/* Supporting sentence under the headline — used by the reset flow, where the
   headline alone does not say what the form will do. */
.ins-login__lede {
    margin: -0.75rem 0 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ins-ink-muted);
}

/* Success / informational. Steel keyline, never a filled panel — a fill at
   this size reads as a button, and there is already one on the page. */
.ins-login__status {
    border: 1px solid rgba(90, 155, 216, 0.45);
    border-left-width: 3px;
    border-radius: 0 6px 6px 0;
    background: rgba(90, 155, 216, 0.12);
    color: var(--ins-ink-body);
    padding: 12px 14px;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.ins-login__form {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.ins-login__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
}

.ins-login__check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ins-ink-muted);
    cursor: pointer;
}

.ins-login__check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--ins-action);
    cursor: pointer;
}

.ins-login__submit { margin-top: 0.25rem; }

.ins-login__or { margin: 1.5rem 0 1.125rem; }

.ins-login__sso-form { display: block; }

.ins-login__sso-form + .ins-login__sso-form { margin-top: 0.625rem; }

.ins-login__sso { width: 100%; }

.ins-login__sso-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.ins-login__form-footer {
    margin-top: 1.75rem;
    font-size: 0.8125rem;
    color: var(--ins-ink-muted);
    line-height: 1.7;
}

.ins-login__form-footer p { margin: 0; }

.ins-login__legal {
    margin: 2rem 0 0;
    font-size: 0.75rem;
    color: var(--ins-ink-muted);
}

.ins-login__legal-link {
    color: var(--ins-ink-body);
    text-decoration: none;
}

.ins-login__legal-link:hover {
    color: var(--ins-ink);
    text-decoration: underline;
}

/* Every piece of type on the sign-in gets the halo, so nothing sits flat on
   the black. Scoped by container rather than listed selector by selector —
   the two exclusions below are the whole exception list. */
.ins-login__form-inner {
    text-shadow: var(--ins-text-halo);
}

/* The stage text needs a heavier halo than the form text: it sits over the
   graph and the sunrise, not over flat black, so a light glow alone would be
   swallowed. The dark stop is doing the real work here — it separates the
   glyphs from whatever is behind them. */
.ins-login__meta,
.ins-login__vertical {
    text-shadow:
        0 0 30px rgba(196, 220, 240, 0.42),
        0 0  9px rgba(196, 220, 240, 0.26),
        0 1px 3px rgba(0, 0, 0, 0.85);
}

/* Inputs: glowing type inside a field reads as a rendering fault.
   Filled action button: the halo just softens the edge against the fill. */
.ins-login .ins-input,
.ins-login .ins-input::placeholder,
.ins-login .ins-btn--go {
    text-shadow: none;
}

/* ---------- RIGHT: the estate ----------
   Stacking order matters:
     1 network canvas  the graph assembling itself
     2 vignette        darkens the left edge so the form pane gets a clean
                       border, and lifts the bottom slightly
     3 cutout canvas   the Viewport knocked out, infrastructure in the band.
                       Transparent everywhere except the band, so the network
                       reads through the counter.
     4 meta / caption
   ---------------------------------------------------------------- */

.ins-login__stage {
    position: relative;
    overflow: hidden;
    border-left: 1px solid var(--ins-hairline);
    /* Base lift under the canvases, weighted to the bottom-right so the pane
       is already warming toward the sunrise before a pixel is drawn. */
    background:
        radial-gradient(88% 74% at 78% 84%,
            rgba(104, 140, 166, 0.20) 0%,
            rgba(52, 82, 104, 0.10) 45%,
            rgba(0, 0, 0, 0) 100%),
        var(--ins-ground);
}

.ins-login__network,
.ins-login__cutout {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.ins-login__network { z-index: 1; }

.ins-login__cutout {
    z-index: 3;
    pointer-events: none;
}

.ins-login__vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* Left edge only. The bottom gradient that used to live here was sitting
       directly on top of the sunrise and flattening it. */
    background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.66) 12%, rgba(0, 0, 0, 0) 40%);
}

.ins-login__meta {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
    z-index: 4;
    max-width: 22rem;
}

.ins-login__claim {
    font-family: var(--ins-font-display);
    font-size: 1.0625rem;
    line-height: 1.32;
    letter-spacing: -0.01em;
    /* White, not Silver. This sits over the estate graph and the sunrise, so
       it competes with a live background rather than flat black. */
    color: var(--ins-ink);
    margin: 0 0 1rem;
}

.ins-login__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.125rem;
}

.ins-login__legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ins-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ins-ink-body);
}

/* The key mirrors how a node actually renders: a small hot centre inside a
   coloured bloom, not a flat chip. */
.ins-login__legend i {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
    box-shadow: 0 0 7px 1px currentColor;
}

/* Cycles with the imagery. This is where "telecoms is the proven first
   vertical, not the product boundary" gets argued without anyone writing it. */
.ins-login__vertical {
    position: absolute;
    left: 2.5rem;
    bottom: 2.25rem;
    z-index: 4;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--ins-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ins-ink-body);
}

.ins-login__vertical i {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--ins-action);
    flex-shrink: 0;
}

/* ---------- Narrow desktop: the 14-inch laptop tier ---------- */
@media (max-width: 1280px) {
    .ins-login { grid-template-columns: minmax(340px, 46%) 1fr; }

    .ins-login__form-pane { padding: 2.5rem 2.25rem; }

    .ins-login__meta {
        top: 2rem;
        left: 2rem;
        max-width: 18rem;
    }

    .ins-login__vertical {
        left: 2rem;
        bottom: 1.75rem;
    }
}

/* ---------- Tablet and below: stack, stage on top ----------
   The stage is the sell so it stays, but the form has to be reachable
   without hunting — hence a fixed band with the form directly beneath. */
@media (max-width: 1023px) {
    .ins-login {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(14rem, 30dvh) 1fr;
        overflow-y: auto;
    }

    .ins-login__stage {
        border-left: 0;
        border-bottom: 1px solid var(--ins-hairline);
        order: -1;
    }

    .ins-login__vignette {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 40%);
    }

    .ins-login__meta { display: none; }

    .ins-login__vertical {
        left: 1.5rem;
        bottom: 1.25rem;
    }

    .ins-login__form-pane {
        justify-content: flex-start;
        padding: 2.5rem 1.5rem 3rem;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .ins-login { grid-template-rows: minmax(11rem, 24dvh) 1fr; }

    .ins-login__wordmark { width: 11rem; }

    .ins-login__brand { margin-bottom: 1.75rem; }

    .ins-login__pitch { margin-bottom: 1.5rem; }

    .ins-login__form-pane { padding: 2rem 1.25rem 2.5rem; }

    /* Touch floor. min-height only, so a control can grow but never clip. */
    .ins-login .ins-btn,
    .ins-login .ins-input { min-height: 44px; }
}

/* ---------- Short viewports: 720p laptops ---------- */
@media (max-height: 799px) and (min-width: 1024px) {
    .ins-login__form-pane { padding-block: 1.75rem; }

    .ins-login__brand { margin-bottom: 1.5rem; }

    .ins-login__pitch { margin-bottom: 1.375rem; }

    .ins-login__or { margin: 1.125rem 0 0.875rem; }

    .ins-login__legal { margin-top: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ins-login * { transition: none !important; }
}

/* ==========================================================================
 * THE FORM PANE GOES LIGHT
 *
 * 2026-08-27. This is the composition V2 p.36 already specifies — the
 * guidelines contain a login mock-up, and it is a black brand pane beside a
 * WHITE form pane. Ours is that, mirrored: form left, stage right.
 *
 * It also shortens the handoff into the product. White -> --ground #DCE6F2 is
 * a small step inside one hue family; Black -> #DCE6F2 was the jump that
 * started the whole colour conversation (ADR-0110).
 *
 * Scoped entirely to .ins-login__form-pane, so the `ins-` primitives keep
 * their dark defaults everywhere else — the stage, and all four state pages,
 * are untouched. No markup change was needed for this.
 *
 * Placed at the end of the file deliberately: these override the dark rules
 * above at equal specificity, and later wins.
 * ========================================================================== */

.ins-login__form-pane {
    color: var(--ins-light-ink-body);

    /* Replaces the two dark glow layers outright. A soft pool tinted toward
       the app's own canvas colour — enough to keep the pane from reading as a
       flat sheet, without the "beamed in" glare that only works on black. */
    background:
        radial-gradient(closest-side,
            rgba(220, 230, 242, 0.90) 0%,
            rgba(232, 239, 246, 0.50) 44%,
            rgba(255, 255, 255, 0) 100%) no-repeat 50% 46% / min(60rem, 210%) min(60rem, 175%),
        var(--ins-light-ground);
}

/* The text halo is a LIGHT bloom. On white it is invisible at best and a
   grey smear at worst, so it comes off entirely on this side. */
.ins-login__form-pane,
.ins-login__form-inner,
.ins-login__form-pane .ins-display,
.ins-login__form-pane .ins-eyebrow,
.ins-login__form-pane .ins-label,
.ins-login__form-pane .ins-btn--ghost {
    text-shadow: none;
}

/* --- Brand + headline ----------------------------------------------------- */

.ins-login__form-pane .ins-login__brand { color: var(--ins-light-ink); }

.ins-login__form-pane .ins-login__brand:focus-visible {
    outline-color: var(--ins-action);
}

.ins-login__form-pane .ins-display { color: var(--ins-light-ink); }

.ins-login__form-pane .ins-eyebrow { color: var(--ins-light-ink-muted); }

.ins-login__form-pane .ins-login__lede { color: var(--ins-light-ink-muted); }

/* --- Fields --------------------------------------------------------------- */

.ins-login__form-pane .ins-label { color: var(--ins-light-ink-body); }

.ins-login__form-pane .ins-input {
    background: var(--ins-light-sunken);
    border-color: var(--ins-light-line);
    color: var(--ins-light-ink);
}

.ins-login__form-pane .ins-input::placeholder {
    color: var(--ins-light-ink-muted);
    opacity: 1;
}

.ins-login__form-pane .ins-input:hover {
    border-color: #5F737D;
    background: var(--ins-light-ground);
}

.ins-login__form-pane .ins-input:focus {
    border-color: var(--ins-action);
    background: var(--ins-light-ground);
    box-shadow: 0 0 0 3px rgba(67, 120, 181, 0.20);
}

/* --- Buttons --------------------------------------------------------------
   .ins-btn--go needs no override: --ins-action #4378B5 with white type is
   4.57:1, which holds on white exactly as it does on black. It is also the
   product's own button, which is the point. */

.ins-login__form-pane .ins-btn--ghost {
    background: var(--ins-light-ground);
    border-color: var(--ins-light-line);
    color: var(--ins-light-ink);
}

.ins-login__form-pane .ins-btn--ghost:hover {
    background: var(--ins-light-sunken);
    border-color: #5F737D;
    color: var(--ins-light-ink);
}

.ins-login__form-pane .ins-btn:focus-visible {
    outline-color: var(--ins-action);
}

/* --- Divider, checkbox, links --------------------------------------------- */

.ins-login__form-pane .ins-or { color: var(--ins-light-ink-muted); }
.ins-login__form-pane .ins-or::before,
.ins-login__form-pane .ins-or::after { background: var(--ins-light-line-soft); }

.ins-login__form-pane .ins-login__check { color: var(--ins-light-ink-body); }

.ins-login__form-pane .ins-link { color: var(--ins-action); }
.ins-login__form-pane .ins-link:hover { color: var(--ins-action-on-light-hover); }

/* --- Footers -------------------------------------------------------------- */

.ins-login__form-pane .ins-login__form-footer { color: var(--ins-light-ink-muted); }
.ins-login__form-pane .ins-login__legal { color: var(--ins-light-ink-muted); }

.ins-login__form-pane .ins-login__legal-link { color: var(--ins-light-ink-body); }
.ins-login__form-pane .ins-login__legal-link:hover { color: var(--ins-light-ink); }

/* --- Alerts ---------------------------------------------------------------
   Same keyline construction as the dark side, re-weighted for white: the tint
   drops because a 10% wash that reads as a hint on black reads as a filled
   panel on white. */

.ins-login__form-pane .ins-alert {
    border-color: rgba(198, 40, 30, 0.45);
    background: rgba(198, 40, 30, 0.06);
    color: #8E2018;
}

.ins-login__form-pane .ins-login__status {
    border-color: rgba(40, 75, 79, 0.40);
    background: rgba(40, 75, 79, 0.06);
    color: var(--ins-light-ink-body);
}

/* --- The seam -------------------------------------------------------------
   White against black needs no border, and the dark hairline was invisible
   against the stage anyway. */

.ins-login__stage { border-left: 0; }

@media (max-width: 1023px) {
    /* Stacked: the stage sits ABOVE the form, so the rule that separates them
       has to work against black on one side and white on the other. */
    .ins-login__stage {
        border-bottom: 0;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
    }
}