/* Login page: full-bleed split screen.
   The design kit caps .login-shell at --maxw-shell (1440px) and centres it, which
   leaves empty page margins either side on wide screens. The sign-in page is a
   single full-viewport composition, so the split runs edge to edge; the form
   card keeps the kit's own width. The vendored kit is not edited. */

.login-shell {
  max-width: none;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

/* The brand panel grows with the viewport, so its padding does too; its text
   stays on a readable measure. */
.login-side {
  padding: clamp(48px, 5vw, 96px) clamp(56px, 6vw, 128px) clamp(40px, 4vw, 72px);
}
.login-side > .stack {
  max-width: 560px;
}

.login-main {
  padding: clamp(32px, 4vw, 72px);
  background: var(--paper);
}

@media (max-width: 960px) {
  .login-shell { grid-template-columns: minmax(0, 1fr); }
}

/* Sign-in splash: shown after a filled-in form is submitted, until the next page
   (or the error page) loads. Same brand gradient and dot grid as the brand panel,
   so it reads as the panel expanding over the page. */
.login-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-navy) 100%);
  color: var(--ink-inverse);
  opacity: 0;
  transition: opacity 220ms ease-out;
}
.login-splash[hidden] { display: none; }
.login-splash.is-visible { opacity: 1; }
.login-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    radial-gradient(circle at 0.5px 0.5px, rgba(255, 255, 255, 0.12) 0.9px, transparent 1.1px),
    radial-gradient(circle at 0.5px 0.5px, rgba(255, 255, 255, 0.04) 0.9px, transparent 1.1px);
  background-size: 96px 96px, 24px 24px;
}
.login-splash-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: 0 24px;
  text-align: center;
}
.login-splash-track {
  position: relative;
  width: min(280px, 70vw);
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
}
.login-splash-track > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: rgba(255, 255, 255, 0.92);
  animation: login-splash-sweep 1.15s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.login-splash-title {
  margin: 0;
  font-size: var(--size-body-lg, 18px);
  letter-spacing: 0.02em;
}
.login-splash-detail {
  margin: calc(-1 * var(--space-3)) 0 0;
  font-size: var(--size-body-sm, 13px);
  color: rgba(255, 255, 255, 0.72);
}
@keyframes login-splash-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(270%); }
}
@media (prefers-reduced-motion: reduce) {
  .login-splash { transition: none; }
  .login-splash-track > span { animation: none; width: 100%; opacity: 0.6; }
}