/* Auth pages: sign up (login.html), sign in, forgot password and reset
   password. Loaded after style.css; everything is scoped to body.orbit-auth so
   no other page is affected. Spacing follows an 8px scale. The Arc widgets
   (password strength, password field, account type) get their own tokens in
   frontend/src/widgets/auth-widgets.css. */

body.orbit-auth {
  --su-bg: rgb(22, 20, 41);
  --su-blue: #2e5bff;
  --su-purple: #9d50ff;
  --su-cyan: #00f5ff;
  --su-text: #f1f5f9;
  --su-muted: #94a3b8;
  --su-subtle: #64748b;
  --su-field: #0b1120;
  --su-line: rgba(148, 163, 184, 0.18);
  --su-line-hover: rgba(148, 163, 184, 0.34);
  --su-danger: #f87171;
  --su-focus: 0 0 0 3px rgba(46, 91, 255, 0.32);
  --su-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --su-body: "Manrope", system-ui, sans-serif;

  display: block;
  min-height: 100vh;
  margin: 0;
  background: var(--su-bg);
  color: var(--su-text);
  font-family: var(--su-body);
  overflow-x: hidden;
}

/* style.css paints a full-screen body::before in var(--bg); use the sign-up
   background color there instead so it reaches every edge. */
body.orbit-auth::before { background: var(--su-bg); }

/* Page-wide background, behind everything: the original sign-up glows,
   corner rings, dot grid and light streak, spread across the whole page. */
.orbit-auth .su-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(560px 560px at -6% -10%, rgba(150, 70, 255, 0.38), transparent 60%),
    radial-gradient(440px 440px at 0% 100%, rgba(130, 80, 255, 0.3), transparent 65%),
    radial-gradient(620px 620px at 100% 100%, rgba(50, 200, 255, 0.24), transparent 60%),
    radial-gradient(360px 360px at 52% 4%, rgba(80, 170, 255, 0.14), transparent 65%);
}
/* Dot grid, faded in at the two bottom corners. */
.orbit-auth .su-ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 1px, transparent 1.6px);
  background-size: 15px 15px;
  -webkit-mask-image:
    radial-gradient(180px 180px at 3% 97%, black, transparent 70%),
    radial-gradient(180px 180px at 98% 94%, black, transparent 70%);
  mask-image:
    radial-gradient(180px 180px at 3% 97%, black, transparent 70%),
    radial-gradient(180px 180px at 98% 94%, black, transparent 70%);
  opacity: 0.4;
}
/* Thin orbit rings in the corners. */
.orbit-auth .su-orbit { position: absolute; border-radius: 50%; }
.orbit-auth .su-orbit-a {
  width: 200px;
  height: 200px;
  left: -60px;
  bottom: -60px;
  border: 2px solid rgba(150, 110, 255, 0.22);
  box-shadow: 0 0 0 40px transparent, 0 0 0 42px rgba(150, 110, 255, 0.12);
}
.orbit-auth .su-orbit-b {
  width: 160px;
  height: 160px;
  right: -50px;
  bottom: -40px;
  border: 2px solid rgba(80, 195, 255, 0.2);
}
/* Light streak with a glowing point, top middle of the page. */
.orbit-auth .su-streak {
  position: absolute;
  top: 6%;
  left: 22%;
  width: 340px;
  height: 1px;
  background: linear-gradient(100deg, transparent, rgba(130, 205, 255, 0.9) 60%, transparent);
  transform: rotate(28deg);
}
.orbit-auth .su-streak::after {
  content: '';
  position: absolute;
  right: 26%;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #bfe8ff;
  box-shadow: 0 0 12px 3px rgba(150, 220, 255, 0.85);
}

.orbit-auth .su-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 45fr 55fr;
  align-items: center;
  min-height: 100vh;
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 48px;
  gap: 48px;
  box-sizing: border-box;
}

/* Left panel */
.orbit-auth .su-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
}
.orbit-auth .su-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  color: var(--su-text);
  text-decoration: none;
  border-radius: 12px;
}
.orbit-auth .su-brand img { width: 40px; height: 40px; display: block; }
.orbit-auth .su-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.orbit-auth .su-brand-text strong { font-family: var(--su-heading); font-size: 18px; font-weight: 700; letter-spacing: 0.01em; }
.orbit-auth .su-brand-text small { color: var(--su-muted); font-size: 12px; font-weight: 500; }

.orbit-auth .su-hero-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 32px 0 24px;
}
.orbit-auth .su-hero h1 {
  margin: 0;
  font-family: var(--su-heading);
  font-size: clamp(44px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
}
.orbit-auth .su-gradient {
  background: linear-gradient(90deg, var(--su-cyan), #4f8dff 50%, var(--su-purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.orbit-auth .su-lead {
  max-width: 460px;
  margin: 0;
  color: #dbe3f0;
  font-size: 17px;
  line-height: 1.6;
}

.orbit-auth .su-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}
.orbit-auth .su-features {
  display: grid;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.orbit-auth .su-features li { display: flex; align-items: flex-start; gap: 16px; }
.orbit-auth .su-feature-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  background: rgba(46, 91, 255, 0.12);
  border: 1px solid rgba(46, 91, 255, 0.28);
  color: #8fb0ff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 18px rgba(123, 112, 255, 0.22);
}
.orbit-auth .su-features li:nth-child(2) .su-feature-icon { background: rgba(0, 245, 255, 0.08); border-color: rgba(0, 245, 255, 0.22); color: #7feaf5; }
.orbit-auth .su-features li:nth-child(3) .su-feature-icon { background: rgba(157, 80, 255, 0.12); border-color: rgba(157, 80, 255, 0.28); color: #c4a1ff; }
.orbit-auth .su-feature-icon svg { width: 22px; height: 22px; }
.orbit-auth .su-features strong { display: block; color: #fff; font-family: var(--su-heading); font-size: 17px; font-weight: 700; }
.orbit-auth .su-features p { max-width: 240px; margin: 8px 0 0; color: #aab4c8; font-size: 15px; line-height: 1.45; }

/* The existing analytics mockup, placed in its own column so it never covers text. */
.orbit-auth .su-art { position: relative; display: grid; place-items: center; min-height: 200px; }
.orbit-auth .su-art .login-hero-graphic {
  position: relative;
  top: auto;
  right: auto;
  width: min(100%, 300px);
  height: 150px;
  transform: rotate(-8deg);
}

/* Form panel */
.orbit-auth .su-panel { display: flex; justify-content: center; min-width: 0; }
.orbit-auth .su-card {
  width: 100%;
  max-width: 560px;
  padding: 32px;
  box-sizing: border-box;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(15, 20, 36, 0.82), rgba(10, 14, 26, 0.88));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.orbit-auth .su-card h2 {
  margin: 0;
  font-family: var(--su-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}
.orbit-auth .su-sub { margin: 8px 0 0; color: var(--su-muted); font-size: 14px; }
.orbit-auth .su-sub a,
.orbit-auth .su-link-btn {
  color: #5ee7f5;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
}
.orbit-auth .su-sub a:hover,
.orbit-auth .su-link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

.orbit-auth .su-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.orbit-auth .su-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.orbit-auth .su-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.orbit-auth .su-field[hidden] { display: none; }
.orbit-auth .su-label {
  margin: 0;
  color: var(--su-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.orbit-auth .su-input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--su-line);
  border-radius: 10px;
  background: var(--su-field);
  color: var(--su-text);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.orbit-auth .su-input::placeholder { color: var(--su-subtle); }
@media (hover: hover) { .orbit-auth .su-input:hover:not(:focus) { border-color: var(--su-line-hover); } }
.orbit-auth .su-input:focus { border-color: var(--su-blue); box-shadow: var(--su-focus); }
.orbit-auth .su-input[aria-invalid="true"] { border-color: var(--su-danger); }
/* Phones zoom into fields under 16px. */
@media (pointer: coarse) { .orbit-auth .su-input { font-size: 16px; } }

/* Fallback controls, shown only if the Arc bundle fails to load. */
.orbit-auth .su-account-type:not([data-arc-mounted]) { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border: 1px solid var(--su-line); border-radius: 10px; background: var(--su-field); }
.orbit-auth .su-account-option { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; border-radius: 7px; color: var(--su-muted); font-size: 14px; cursor: pointer; }
.orbit-auth .su-account-option.active { background: var(--su-blue); color: #fff; }
.orbit-auth .su-password-fallback { position: relative; }
.orbit-auth .su-password-fallback .su-input { padding-right: 72px; }
.orbit-auth .su-password-toggle { position: absolute; top: 6px; right: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--su-muted); font: inherit; font-size: 13px; cursor: pointer; }

/* Terms */
.orbit-auth .su-terms {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--su-muted);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
.orbit-auth .su-terms input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 1px 0 0;
  accent-color: var(--su-blue);
  cursor: pointer;
}
.orbit-auth .su-link-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }

/* Form-level notice (role="status") and error (role="alert"). */
.orbit-auth .su-notice {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(94, 231, 245, 0.3);
  border-radius: 10px;
  background: rgba(0, 245, 255, 0.06);
  color: #cffafe;
  font-size: 14px;
  line-height: 1.5;
}
.orbit-auth .su-notice[hidden] { display: none; }
.orbit-auth .su-notice[data-tone="success"] { border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.08); color: #bbf7d0; }

/* Secondary links under the form (forgot password, back to sign in). */
.orbit-auth .su-form-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 14px; }
.orbit-auth .su-form-links-end { justify-content: flex-end; margin-top: -8px; }
.orbit-auth .su-form-links a,
.orbit-auth .su-text-btn { color: #5ee7f5; font-weight: 600; text-decoration: none; border-radius: 4px; }
.orbit-auth .su-text-btn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.orbit-auth .su-text-btn:disabled { color: var(--su-muted); cursor: default; }
.orbit-auth .su-form-links a:hover,
.orbit-auth .su-text-btn:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.orbit-auth .su-form-links a:focus-visible,
.orbit-auth .su-text-btn:focus-visible { outline: 2px solid var(--su-cyan); outline-offset: 2px; }

/* Form-level error, announced by role="alert". */
.orbit-auth .su-error {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.08);
  color: #fecaca;
  font-size: 14px;
  line-height: 1.5;
}
.orbit-auth .su-error[hidden] { display: none; }

/* Submit: hover, disabled and loading (the existing walk-through-the-door animation). */
.orbit-auth .su-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--su-purple), var(--su-blue) 55%, var(--su-cyan));
  color: #fff;
  font-family: var(--su-heading);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(46, 91, 255, 0.28);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, opacity 160ms ease;
}
@media (hover: hover) {
  .orbit-auth .su-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(46, 91, 255, 0.4); filter: brightness(1.06); }
}
.orbit-auth .su-submit:active:not(:disabled) { transform: translateY(0); }
.orbit-auth .su-submit:disabled { cursor: not-allowed; opacity: 0.45; box-shadow: none; filter: saturate(0.6); }
.orbit-auth .su-submit[aria-busy="true"] { opacity: 1; filter: none; cursor: progress; }

/* Keyboard focus for links and buttons on the page (Arc widgets bring their own). */
.orbit-auth .su-brand:focus-visible,
.orbit-auth .su-sub a:focus-visible,
.orbit-auth .su-link-btn:focus-visible,
.orbit-auth .su-submit:focus-visible,
.orbit-auth .su-password-toggle:focus-visible,
.orbit-auth .su-terms input:focus-visible {
  outline: 2px solid var(--su-cyan);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .orbit-auth .su-input,
  .orbit-auth .su-submit { transition: none; }
  .orbit-auth .su-submit:hover:not(:disabled) { transform: none; }
}

/* Laptops: tighter gutters; the illustration goes before the text gets cramped. */
@media (max-width: 1280px) {
  .orbit-auth .su-shell { padding: 32px; gap: 32px; }
  .orbit-auth .su-hero-row { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 1040px) {
  .orbit-auth .su-hero-row { grid-template-columns: minmax(0, 1fr); }
  .orbit-auth .su-art { display: none; }
}

/* Short desktop windows (laptops at 125-150% scaling): tighten so the whole
   form fits without scrolling. */
@media (min-width: 861px) and (max-height: 820px) {
  .orbit-auth .su-shell { padding-top: 16px; padding-bottom: 16px; }
  .orbit-auth .su-card { padding: 24px 32px; }
  .orbit-auth .su-card h2 { font-size: 24px; }
  .orbit-auth .su-sub { margin-top: 4px; }
  .orbit-auth .su-form { gap: 12px; margin-top: 16px; }
  .orbit-auth .su-row { gap: 12px; }
  .orbit-auth .su-field { gap: 4px; }
  .orbit-auth .su-input { height: 40px; }
  .orbit-auth .arc-scope { --control-height-md: 40px; --control-height-sm: 32px; }
  .orbit-auth .su-submit { min-height: 44px; margin-top: 4px; }
  .orbit-auth .su-hero-body { gap: 20px; padding: 24px 0 16px; }
  .orbit-auth .su-features { gap: 24px; }
}
@media (min-width: 861px) and (max-height: 660px) {
  .orbit-auth .su-shell { padding-top: 8px; padding-bottom: 8px; }
  .orbit-auth .su-card { padding: 16px 24px; }
  .orbit-auth .su-card h2 { font-size: 22px; }
  .orbit-auth .su-form { gap: 8px; margin-top: 12px; }
  .orbit-auth .su-input { height: 38px; }
  .orbit-auth .arc-scope { --control-height-md: 38px; --control-height-sm: 30px; }
  .orbit-auth .su-hero-body { gap: 16px; padding: 16px 0 8px; }
  .orbit-auth .su-features { gap: 16px; }
}

@media (min-width: 861px) and (max-height: 580px) {
  .orbit-auth .su-shell { padding-top: 4px; padding-bottom: 4px; }
  .orbit-auth .su-card { padding: 12px 24px; }
  .orbit-auth .su-card h2 { font-size: 20px; }
  .orbit-auth .su-sub { margin-top: 2px; font-size: 13px; }
  .orbit-auth .su-form { gap: 6px; margin-top: 8px; }
  .orbit-auth .su-row { gap: 12px; }
  .orbit-auth .su-label { line-height: 1.3; }
  .orbit-auth .su-input { height: 36px; }
  .orbit-auth .arc-scope { --control-height-md: 36px; --control-height-sm: 28px; }
  .orbit-auth .su-submit { min-height: 40px; margin-top: 2px; }
  .orbit-auth .su-hero-body { padding: 8px 0 0; gap: 12px; }
  .orbit-auth .su-hero-row { margin-top: 0; }
  .orbit-auth .su-features { gap: 12px; }
  .orbit-auth .su-features p { margin-top: 4px; }
}

/* Tablet and phone: stack the welcome section above the form. */
@media (max-width: 860px) {
  .orbit-auth .su-shell {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding: 24px 16px 32px;
  }
  .orbit-auth .su-hero-body { padding: 24px 0 0; gap: 12px; }
  .orbit-auth .su-hero h1 { font-size: 36px; }
  .orbit-auth .su-lead { font-size: 15px; }
  .orbit-auth .su-hero-row { margin-top: 8px; }
  /* Shortened feature list: titles only, in one wrapping row. */
  .orbit-auth .su-features { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .orbit-auth .su-features li { align-items: center; gap: 8px; }
  .orbit-auth .su-features p { display: none; }
  .orbit-auth .su-features strong { font-size: 13px; font-weight: 500; color: var(--su-muted); }
  .orbit-auth .su-feature-icon { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; }
  .orbit-auth .su-feature-icon svg { width: 16px; height: 16px; }
  .orbit-auth .su-orbit,
  .orbit-auth .su-streak { display: none; }
  .orbit-auth .su-card { max-width: none; padding: 24px 20px; }
}
@media (max-width: 480px) {
  .orbit-auth .su-row { grid-template-columns: minmax(0, 1fr); }
  .orbit-auth .su-hero h1 { font-size: 32px; }
  .orbit-auth .su-card { padding: 24px 16px; border-radius: 16px; }
}

/* Sign-in on desktop: the same view as a 125% browser zoom (requested look),
   at 100%. The layout is scaled with CSS zoom, so the form, the Arc fields
   and the welcome panel all grow together; the illustration is left out, as
   it is at 125%. Media queries still see the real window size. */
@media (min-width: 1100px) {
  .orbit-auth.su-page-signin .su-shell { zoom: 1.25; min-height: 80vh; }
  .orbit-auth.su-page-signin .su-hero-row { grid-template-columns: minmax(0, 1fr); }
  .orbit-auth.su-page-signin .su-art { display: none; }
  .orbit-auth.su-page-signin .su-hero h1 { font-size: clamp(40px, 3.7vw, 52px); }
}
@media (min-width: 1100px) and (max-height: 700px) {
  .orbit-auth.su-page-signin .su-shell { padding-top: 4px; padding-bottom: 4px; }
  .orbit-auth.su-page-signin .su-hero-body { gap: 8px; padding: 4px 0 0; }
  .orbit-auth.su-page-signin .su-features { gap: 8px; }
  .orbit-auth.su-page-signin .su-features p { margin-top: 2px; }
}

/* "Forgot password?": small text, but a full-height click target. */
.orbit-auth .su-form-links-end { margin-top: -4px; font-size: 12px; }
.orbit-auth .su-form-links-end a { display: inline-flex; align-items: center; min-height: 24px; padding: 0 2px; }

/* Verify page: email in the subtitle, and the two links split left/right. */
.orbit-auth .su-email { color: var(--su-text); font-weight: 600; word-break: break-all; }
.orbit-auth .su-form-links-split { justify-content: space-between; }