/* Sign-in backdrop: a full-screen canvas sphere behind the login card.
 *
 * The sphere itself is drawn by js/login-sphere.js, which reads its palette
 * from this theme's --orb-* tokens via getComputedStyle - so the canvas and
 * the page cannot drift apart.
 *
 * Purely decorative. aria-hidden and pointer-events:none, so it is invisible
 * to assistive technology and can never intercept a click meant for the form.
 * If the script fails to load, the backdrop below still renders and the form
 * still works.
 */

#elmoSphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* Painted in CSS rather than by the canvas, so the page has a dark field the
   moment it renders instead of flashing white before the script runs. */
.orb-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--orb-deep) 16%, transparent) 0%,
      transparent 60%),
    var(--orb-backdrop);
}

/* The card sits above the sphere and stays legible against it.
 *
 * Translucent enough to let the filaments show through, backed by a blur so
 * the labels never compete with moving colour. The sphere also dims itself
 * behind this element - see measureSafe() - which is what actually makes the
 * text readable; the blur handles the edges.
 */
.auth-shell { position: relative; z-index: 1; }
.auth-card {
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: color-mix(in srgb, var(--orb-bright) 30%, transparent);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--orb-backdrop) 65%, transparent);
}

/* A browser without backdrop-filter gets an opaque card instead of unreadable
   text over a moving background. */
@supports not (backdrop-filter: blur(1px)) {
  .auth-card { background: var(--surface); }
}

/* Mobile first: the card stays centred. At phone width there is no room to sit
   off to one side, and the middle is the easiest place to reach.
 *
 * From tablet up it tucks into the bottom right, which clears the centre of
 * the screen so the sphere is actually visible. The sphere re-measures the
 * card on resize, so its dim zone follows this move automatically. */
@media (min-width: 821px) {
  .auth-shell {
    align-items: flex-end;
    justify-content: flex-end;
    padding: clamp(var(--space-5), 4vw, var(--space-6));
  }
}