/*
  auth-shell.css — shared n6 auth-shell for the non-interactive auth pages
  (PartnerLogin, TotpVerify, PasskeyVerify).

  These pages render static SSR without the global CSS bundle, so each page
  links this file explicitly via <HeadContent>. The rules below are the
  byte-identical set extracted from the three pages' former inline <style>
  blocks. Page-specific rules (.n6-card phone paddings, .n6-input, OTP cells,
  fingerprint animation, the max-width:480px blocks) stay inline per page.
*/

/* Shell paints the hard left/right surface split:
     x = 0..640 px  → indigo gradient (matches the fixed 640 px brand panel)
     x = 640..100%  → white form area
   Doing this on the shell (not on the brand panel) lets the SVG network
   sit on top of both halves so the lavender lines on the dark side and the
   violet lines on the white side are continuous. */
.n6-shell {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(to right, #1e1b4b 0px, #312e81 640px, #ffffff 640px, #ffffff 100%);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}
.n6-network {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Brand panel: transparent (no background-color), only the purple dot grid
   overlays via background-image. The shell gradient + SVG network behind
   remain visible through the gaps between the dots. */
.n6-brand {
    background-image: radial-gradient(circle at 1px 1px, rgba(168,85,247,0.10) 0.6px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0;
    background-repeat: repeat;
}

/* Animations — network flow dots + node pulse */
@keyframes n6Flow {
    0%   { offset-distance: 0%;   opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}
@keyframes n6Pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.85; }
}
.n6-flow  { animation: n6Flow 3s linear infinite; }
.n6-pulse { animation: n6Pulse 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .n6-flow, .n6-pulse { animation: none; }
}

/* Mobile-only legal row */
.n6-legal-mobile {
    display: none;
    gap: 14px;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #9ca3af;
}
.n6-legal-mobile a { color: inherit; text-decoration: none; }

/* Responsive
     1024px and up : full split layout
     under 1024px  : brand panel collapses to a compact top-header
                     (lockup only); marketing copy + legal hidden;
                     card centered underneath with reduced padding.
   The 480px phone tweaks stay page-specific (card paddings differ). */

@media (max-width: 1023px) {
    .n6-shell {
        background: linear-gradient(180deg, #1e1b4b 0%, #312e81 220px, #f9fafb 220px, #f9fafb 100%) !important;
    }
    .n6-network { display: none; }
    .n6-layer  { flex-direction: column !important; min-height: 100vh !important; }

    .n6-brand {
        flex: 0 0 auto !important;
        padding: 36px 24px 12px !important;
        background: transparent !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center;
    }
    .n6-brand-lockup { gap: 14px !important; }
    .n6-brand-marketing,
    .n6-brand-legal  { display: none !important; }

    .n6-form-col {
        flex: 1 1 auto !important;
        padding: 16px 20px 32px !important;
        flex-direction: column !important;
    }
    .n6-card { max-width: 550px !important; }
    .n6-legal-mobile   { display: flex !important; color: #6b7280 !important; }
    .n6-legal-mobile a { color: inherit !important; }
}