/* =======================================
   AmbTrack — auth pages (login / register)
   Split-screen: a dark brand panel echoing
   the home page's atmospheric scene, next to
   the existing white form. Reuses styles.css/
   theme.css tokens; defines no new tokens and
   never hides form content — the brand panel
   is a decorative addition that simply doesn't
   render below 900px, where the form already
   works full-width on its own.
   ======================================= */

.auth-shell {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    min-height: 100vh;
    padding-top: 61px; /* clears the fixed .nav bar */
}

.auth-brand {
    flex: 0 0 40%;
    max-width: 520px;
    box-sizing: border-box;
    min-height: calc(100vh - 61px);
    position: sticky;
    top: 61px;
    align-self: flex-start;
    overflow: hidden;
    background: radial-gradient(120% 100% at 20% 0%, #14243f 0%, #0a1526 45%, #060c17 80%, #04080f 100%);
    display: flex;
    flex-direction: column;
    padding: 96px 48px 40px;
}

.auth-brand-scene {
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.auth-glow { position: absolute; border-radius: 50%; }
.auth-glow-red {
    width: 480px; height: 480px;
    background: radial-gradient(circle,
        rgba(220,38,38,.38) 0%, rgba(220,38,38,.26) 16%, rgba(220,38,38,.15) 32%,
        rgba(220,38,38,.07) 50%, rgba(220,38,38,.02) 70%, transparent 100%);
    top: -120px; left: -100px;
}
.auth-glow-blue {
    width: 440px; height: 440px;
    background: radial-gradient(circle,
        rgba(100,116,139,.2) 0%, rgba(100,116,139,.13) 18%, rgba(100,116,139,.07) 34%,
        rgba(100,116,139,.03) 52%, transparent 80%);
    bottom: 0; right: -80px;
}
.auth-road { fill: none; stroke: rgba(148,163,184,.18); stroke-width: 2; stroke-linecap: round; }
.auth-road-thin { stroke: rgba(148,163,184,.11); stroke-width: 1.4; }
.auth-route-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.auth-route-path {
    fill: none; stroke: #fb7185; stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 3 10; opacity: .6;
    filter: drop-shadow(0 0 6px rgba(251,113,133,.5));
}
.auth-route-dot { fill: #fb7185; filter: drop-shadow(0 0 8px rgba(251,113,133,.8)); }

.auth-brand-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.auth-brand-top .nav-logo-mark { width: 30px; height: 30px; border-radius: 9px; }
.auth-brand-top span { font-family: var(--sans); font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -.02em; }

/* Compact echo of the landing hero's illustrative case card — gives the
   panel a concrete product moment instead of pure typography, and ties it
   visually back to the home page. */
.auth-brand-card {
    position: relative; z-index: 1; margin-top: auto;
    width: 232px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 48px -20px rgba(0,0,0,.55);
}
.auth-brand-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.auth-brand-card-status {
    font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .02em;
    color: #93c5fd; background: rgba(59,130,246,.16); padding: 3px 8px; border-radius: 100px;
}
.auth-brand-card-eta { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.4); }
.auth-brand-card-route { height: 46px; margin-bottom: 10px; }
.auth-brand-card-route svg { width: 100%; height: 100%; display: block; }
.auth-brand-card-start { fill: rgba(255,255,255,.85); }
.auth-brand-card-end { fill: #fb7185; filter: drop-shadow(0 0 5px rgba(251,113,133,.85)); }
.auth-brand-card-row { display: flex; justify-content: space-between; gap: 12px; }
.auth-brand-card-row small { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.35); margin-bottom: 2px; }
.auth-brand-card-row strong { font-size: 12px; color: #f3f7ff; font-weight: 600; }

.auth-brand-copy { position: relative; z-index: 1; margin-top: 24px; }
.auth-brand-copy h2 {
    font-family: var(--sans); font-weight: 600; font-size: 28px; line-height: 1.25;
    color: #f3f7ff; margin-bottom: 12px;
}
.auth-brand-copy h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: #fb7185; }
.auth-brand-copy p { font-size: 14px; color: #a9b8cd; line-height: 1.6; max-width: 380px; }

.auth-brand-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.auth-brand-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #c8d4e6; line-height: 1.5; }
.auth-brand-points li svg { flex-shrink: 0; margin-top: 2px; color: #fb7185; }

.auth-brand-foot {
    position: relative; z-index: 1; margin-top: 28px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: rgba(255,255,255,.35);
    border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px;
}

@media (prefers-reduced-motion: no-preference) {
    .auth-brand-card { animation: authCardFloat 6.5s ease-in-out infinite; }
}
@keyframes authCardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.auth-content {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--slate-50);
}

/* The form's own card, elevated off the content panel's subtle grey — on a
   plain white page the form floated with no visual weight of its own next
   to the brand panel's atmosphere; a bordered, shadowed card gives it the
   same sense of intention. Reverts to a plain, unboxed layout on mobile,
   where the brand panel is already gone and the extra chrome just crowds
   the screen. */
.auth-form-card {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px -28px rgba(15,23,42,.16);
    padding: 40px 36px;
}

/* .register-form's own padding-bottom (96px) was sized for the old plain
   page, where it kept the form clear of the footer. Inside the card, the
   card's own padding does that job — the extra 96px just looks like a gap
   before the submit button. */
.auth-form-card .register-form { padding: 0; }

@media (max-width: 900px) {
    .auth-brand { display: none; }
}

@media (max-width: 600px) {
    /* Transparent, not a fixed white — .auth-content's parent (body) already
       carries the correct light/dark background for this theme; a fixed
       colour here would fight it (--white stays literal white even in dark
       mode, unlike the slate scale, which theme.css inverts). */
    .auth-content { background: transparent; }
    .auth-form-card { background: transparent; border: none; box-shadow: none; padding: 0; border-radius: 0; }
    .auth-form-card .register-form { padding: 0 0 48px; }
}

/* --slate-50 above is intentionally left to theme.css's dark-mode token
   inversion (it flips to a dark navy there) rather than getting its own
   override here. --white does not invert, so the card needs an explicit
   dark value. */
[data-theme="dark"] .auth-form-card { background: #0d1a2d; border-color: rgba(255,255,255,.07); }
@media (max-width: 600px) {
    [data-theme="dark"] .auth-form-card { background: transparent; }
}

@media (prefers-reduced-motion: no-preference) {
    .auth-glow-red { animation: authGlowDrift 16s ease-in-out infinite; }
    .auth-glow-blue { animation: authGlowDrift 20s ease-in-out infinite reverse; }
    .auth-route-path { animation: authRouteFlow 6s linear infinite; }
    .auth-route-dot { animation: authDotPulse 2.4s ease-in-out infinite; }
}
@keyframes authDotPulse {
    0%, 100% { transform: scale(1); opacity: .85; }
    50% { transform: scale(1.35); opacity: 1; }
}
@keyframes authGlowDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(14px, 10px) scale(1.05); }
}
@keyframes authRouteFlow {
    to { stroke-dashoffset: -130; }
}