body.login-shell:has(.orbit-login){background:radial-gradient(ellipse at 23% 45%, #d7e7f6, transparent 48%), linear-gradient(115deg,#eff5fa,#faf8f4) fixed !important;color:#243d55;color-scheme:light}
body:has(.orbit-login) #app-content{width:min(1050px,96%);max-width:none;margin:auto;padding:20px;display:block}
body:has(.orbit-login) #app-header{background:transparent;border:0;box-shadow:none}
body:has(.orbit-login) .flash{position:relative;z-index:1;background:#ffeded;color:#8d2934}
.orbit-login{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:7%;min-height:70vh}
.orbit-login .login-experience,.orbit-login .login-card{position:relative;inset:auto;display:block;min-height:0;width:100%;max-width:370px;margin:auto;padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
.orbit-login .login-card:before,.orbit-login .login-card:after{display:none}
/* Keep the art independent of the form width and scroll position. */
.orbit-art {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  --orbit-width: clamp(260px, 43vw, 650px);
  --center-x: 28%;
  --center-y: 48%;
}
.orbit-path {
  position: absolute;
  left: var(--center-x);
  top: var(--center-y);
  width: var(--orbit-width);
  aspect-ratio: 2.65;
  translate: -50% -50%;
  border: 1px solid #a7936a89;
  border-radius: 50%;
  transform: rotate(-27deg);
}
.orbit-path.second { transform: rotate(26deg); border-color: #71849b91; }
.orbit-path.third { transform: rotate(83deg); border-style: dotted; }
.orbit-path i {
  position: absolute;
  offset-path: ellipse(50% 50% at 50% 50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ba873d;
  box-shadow: 0 0 14px #efd39e;
  animation: orbit-travel var(--lap, 30s) linear infinite;
  animation-delay: calc(var(--lap, 30s) * -.08);
}
.orbit-path.second { --lap: 40s; }
.orbit-path.third { --lap: 47s; }
.orbit-path.second i { background: #447eac; }
.orbit-path.third i { background: #8a9ba9; }
.orbit-path i:nth-child(2) { width: 5px; height: 5px; animation-delay: calc(var(--lap, 30s) * -.41); }
.orbit-path i:nth-child(3) { width: 4px; height: 4px; animation-delay: calc(var(--lap, 30s) * -.75); }
@keyframes orbit-travel { to { offset-distance: 100%; } }
.orbit-login .login-experience { grid-column: 2; z-index: 1; }
@media (max-width: 680px) {
  .orbit-login { grid-template-columns: 1fr; align-content: center; }
  .orbit-login .login-experience { grid-column: 1; }
  .orbit-art { --orbit-width: 44vw; --center-x: 14%; --center-y: 4%; opacity: .7; }
}
@media(prefers-reduced-motion:reduce){.orbit-path i{animation-play-state:paused}}

/* Scope the orbit palette to the preview, including controls styled by the admin theme. */
#app-content .orbit-login .login-card {
  box-sizing: border-box;
  padding: clamp(20px, 3vw, 36px);
  background: transparent !important;
  border: 0 !important;
  border-radius: 18px;
  box-shadow: none !important;
}
#app-content .orbit-login .login-brand { justify-content: flex-start; }
#app-content .orbit-login .login-password-wrap { position: relative; display: block; }
#app-content .orbit-login .login-card input:not([type="hidden"]) {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  margin: 0;
  background: rgb(255 255 255 / 60%) !important;
  color: #243d55 !important;
  border: 1px solid #98afc1 !important;
}
#app-content .orbit-login input[name="password"] { padding-inline-end: 68px; }
#app-content .orbit-login .password-toggle {
  position: absolute;
  inset: 0 6px 0 auto;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0 8px;
  background: transparent !important;
  color: #365b78 !important;
  border: 0;
}
#app-content .orbit-login .login-card button.primary {
  margin-top: 16px;
  background: #365e7e !important;
  color: white !important;
  box-shadow: none !important;
}

#app-content .orbit-login :is(h1, .login-brand, label) { color: #233e56 !important; }
#app-content .orbit-login :is(.login-brand small, .login-support) { color: #526a7e !important; }
#app-content .orbit-login input::placeholder { color: #526a7e !important; }
#app-content .orbit-login input:focus-visible { outline: 2px solid #467795; outline-offset: 2px; }

#app-content .orbit-verify h1 { margin: 24px 0 8px; font-size: 1.5rem; }
#app-content .orbit-verify .verify-help { color: #526a7e; line-height: 1.55; margin: 0 0 20px; }
#app-content .orbit-verify .auth-error { color: #902f3b; background: #fff0ed; padding: 10px 12px; border-radius: 6px; }
#app-content .orbit-verify .auth-back { display: inline-block; margin-top: 16px; color: #365b78; }

/* Keep authentication controls together over the full-screen scene. */
#app-content .orbit-login {min-height:0;padding-block:clamp(16px,4vh,40px)}
@media (min-width: 681px) {
  #app-content .orbit-login {
    box-sizing: border-box;
    min-height: calc(100svh - 8rem);
  }
}
#app-content .orbit-login .login-card {padding:clamp(16px,2vw,24px)}
#app-content .orbit-login .login-brand {margin-bottom:14px}
#app-content .orbit-login .login-card form {display:grid;gap:10px;margin-block:0}
#app-content .orbit-login .login-card form > label {margin:0}
#app-content .orbit-login .login-card input:not([type=hidden]) {height:42px}
#app-content .orbit-login .login-card button.primary {margin-top:2px;min-height:42px}
#app-content .orbit-login .login-support {margin:12px 0 0}
