/* This loader is a distinct startup surface, not a second login home. */
.rm-loading-screen {
  --rm-loading-font: Arial, sans-serif;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(14px, 2.3vw, 26px);
  overflow: hidden;
  border: 1px solid #275274;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 36%, #173c5c99, transparent 62%), linear-gradient(135deg, #0e2741, #061222 55%, #020710);
  box-shadow: 0 20px 80px #02071088, inset 0 0 45px #02071055;
  color: #dee8f0;
  font-family: var(--rm-loading-font);
  text-align: center;
}
.rm-loading-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rm-loading-brand { text-align: left; color: #ffe5ae; font: 600 clamp(25px, 4vw, 32px)/1.05 Georgia, "Times New Roman", serif; }
.rm-loading-subbrand { display: block; margin-top: 6px; padding-left: 2px; color: #dab45e; font: 9px/1.2 Arial, sans-serif; letter-spacing: .44em; }
.rm-loading-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(112px, 1fr) auto auto auto;
  align-content: center;
  justify-items: center;
  min-height: 0;
  width: min(100%, 540px);
  margin: 0 auto;
}

/* Loader-only visual: the original native Redmoon title art, not a recreated
   CSS sun. The surrounding launcher geometry deliberately stays unchanged. */
.rm-loading-redmoon {
  position: relative;
  display: block;
  width: min(100%, 540px);
  max-width: 100%;
  aspect-ratio: 635 / 281;
  margin: 3px auto 0;
}
.rm-loading-original-sun {
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}

.rm-loading-ready-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: center;
  width: min(100%, 420px);
  min-height: clamp(112px, 22vh, 190px);
  margin: 3px auto 0;
}
.rm-loading-ready-actions[hidden],
.rm-loading-redmoon[hidden],
.rm-loading-auth[hidden],
.rm-loading-trusted[hidden],
.rm-loading-suspension-dialog[hidden],
.rm-loading-details[hidden],
.rm-loading-footer[hidden] { display: none; }
.rm-loading-ready-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.rm-loading-login,
.rm-loading-main-website,
.rm-loading-retry,
.rm-loading-auth-submit,
.rm-loading-auth-back {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid #dab45e;
  border-radius: 7px;
  color: #061222;
  cursor: pointer;
  font: 600 15px/1.35 var(--rm-loading-font);
  text-decoration: none;
}
.rm-loading-login,
.rm-loading-retry,
.rm-loading-auth-submit { background: linear-gradient(#f5db98, #dab45e); }
.rm-loading-main-website { border-color: #3d7da7; background: linear-gradient(#173d5b, #0b233a); color: #dbeaf7; }
.rm-loading-login:hover,
.rm-loading-main-website:hover,
.rm-loading-retry:hover,
.rm-loading-auth-submit:hover,
.rm-loading-auth-back:hover { filter: brightness(1.14); }
.rm-loading-screen button:focus-visible,
.rm-loading-screen a:focus-visible,
.rm-loading-screen input:focus-visible { outline: 2px solid #ffe5ae; outline-offset: 3px; }

.rm-loading-auth {
  display: grid;
  width: min(100%, 360px);
  gap: 10px;
  margin: 4px auto 0;
  padding: 14px;
  border: 1px solid #285274;
  border-radius: 9px;
  background: linear-gradient(145deg, #081b30ee, #050d19f4);
  box-shadow: 0 10px 28px #02071099, inset 0 1px 0 #2e678c55;
  text-align: left;
}
.rm-loading-auth-fields { display: grid; gap: 8px; }
.rm-loading-auth-field { display: grid; gap: 4px; color: #c9dceb; font-size: 12px; line-height: 1.25; }
.rm-loading-auth-field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #346486;
  border-radius: 5px;
  background: #020912;
  color: #f2f7fb;
  font: 15px/1.25 var(--rm-loading-font);
}
.rm-loading-auth-field input:hover { border-color: #4b8ab2; }
.rm-loading-auth-field input:disabled,
.rm-loading-auth input:disabled { cursor: wait; opacity: .66; }
.rm-loading-auth-trust { display: flex; align-items: flex-start; gap: 7px; color: #a9c4d9; font-size: 11px; line-height: 1.35; }
.rm-loading-auth-trust input { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: #dab45e; }
.rm-loading-auth-status { min-height: 16px; margin: 0; color: #f4d184; font-size: 12px; line-height: 1.35; text-align: center; }
.rm-loading-auth-status:empty { display: none; }
.rm-loading-auth-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); gap: 8px; }
.rm-loading-auth-submit,
.rm-loading-auth-back { min-height: 40px; padding: 8px 10px; }
.rm-loading-auth-back { border-color: #3d7da7; background: linear-gradient(#173d5b, #0b233a); color: #dbeaf7; }
.rm-loading-auth-website { justify-self: center; color: #9ab7d1; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.rm-loading-auth-website:hover { color: #ffe5ae; }

/* The trusted-device chooser is presentation only. Account discovery and
   ticket issuance stay behind the existing authenticated LoginScreen bridge. */
.rm-loading-trusted {
  display: grid;
  width: min(100%, 360px);
  gap: 10px;
  margin: 4px auto 0;
  padding: 14px;
  border: 1px solid #285274;
  border-radius: 9px;
  background: linear-gradient(145deg, #081b30ee, #050d19f4);
  box-shadow: 0 10px 28px #02071099, inset 0 1px 0 #2e678c55;
}
.rm-loading-trusted-accounts { display: grid; gap: 8px; }
.rm-loading-trusted-account,
.rm-loading-trusted-password,
.rm-loading-trusted-back {
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dab45e;
  border-radius: 6px;
  background: linear-gradient(#173d5b, #0b233a);
  color: #ffe5ae;
  cursor: pointer;
  font: 600 13px/1.3 var(--rm-loading-font);
}
.rm-loading-trusted-account { background: linear-gradient(#1a405f, #0b233a); }
.rm-loading-trusted-password { border-color: #3d7da7; color: #dbeaf7; }
.rm-loading-trusted-back { border-color: #275274; color: #9ab7d1; }
.rm-loading-trusted-account:hover,
.rm-loading-trusted-password:hover,
.rm-loading-trusted-back:hover { filter: brightness(1.14); }
.rm-loading-trusted button:disabled { cursor: wait; opacity: .66; }
.rm-loading-trusted-status { min-height: 16px; margin: 0; color: #f4d184; font-size: 12px; line-height: 1.35; text-align: center; }
.rm-loading-trusted-status:empty { display: none; }

.rm-loading-suspension-dialog {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(calc(100% - 24px), 390px);
  gap: 12px;
  box-sizing: border-box;
  padding: 18px;
  transform: translate(-50%, -50%);
  border: 1px solid #dab45e;
  border-radius: 10px;
  background: linear-gradient(145deg, #102c47f7, #061222fc);
  box-shadow: 0 20px 52px #020710dd, inset 0 1px 0 #4b8ab277;
  text-align: center;
}
.rm-loading-suspension-title { margin: 0; color: #ffe5ae; font: 600 21px/1.2 var(--rm-loading-font); }
.rm-loading-suspension-copy { margin: 0; color: #c9dceb; font-size: 14px; line-height: 1.48; }
.rm-loading-suspension-close {
  min-height: 40px;
  border: 1px solid #dab45e;
  border-radius: 6px;
  background: linear-gradient(#f5db98, #dab45e);
  color: #061222;
  cursor: pointer;
  font: 600 14px/1.3 var(--rm-loading-font);
}
.rm-loading-suspension-close:hover { filter: brightness(1.14); }

.rm-loading-screen[data-rm-loading-state^="auth"] .rm-loading-body { grid-template-rows: minmax(72px, .66fr) auto auto auto; }
.rm-loading-screen[data-rm-loading-state^="auth"] .rm-loading-redmoon { width: min(100%, 360px); margin-top: 0; }

.rm-loading-title { width: 100%; min-width: 0; margin: 7px 0 7px; color: #ffe5ae; font-size: clamp(21px, 3.2vw, 29px); line-height: 1.18; text-align: center; }
.rm-loading-intro { margin: 0 auto 12px; max-width: 470px; color: #9ab7d1; font-size: 14px; line-height: 1.45; }
.rm-loading-details { min-height: 0; }
.rm-loading-progress { display: block; appearance: none; box-sizing: border-box; width: 100%; height: 8px; border: 1px solid #275274; border-radius: 8px; background: #020710; color: #dab45e; overflow: hidden; }
.rm-loading-progress::-webkit-progress-bar { background: #020710; }
.rm-loading-progress::-webkit-progress-value { background: linear-gradient(90deg, #ad8138, #ffe5ae); }
.rm-loading-progress::-moz-progress-bar { background: linear-gradient(90deg, #ad8138, #ffe5ae); }
.rm-loading-count { margin: 7px 0 9px; color: #97aec2; font-size: 12px; }
.rm-loading-checklist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; text-align: left; }
.rm-loading-checklist li { display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; gap: 1px 6px; min-height: 50px; padding: 7px 8px; border: 1px solid #183853; border-radius: 6px; background: #061222bb; font-size: 11px; line-height: 1.2; }
.rm-loading-marker { grid-row: span 2; width: 16px; color: #97aec2; text-align: center; font-size: 16px; line-height: 1; }
.rm-loading-label { overflow-wrap: anywhere; }
.rm-loading-stage-status { color: #97aec2; font-size: 10px; }
.rm-loading-checklist li[data-rm-loading-complete="true"] { border-color: #275274; background: #0e2741cc; }
.rm-loading-checklist li[data-rm-loading-complete="true"] .rm-loading-marker,
.rm-loading-checklist li[data-rm-loading-complete="true"] .rm-loading-stage-status { color: #dab45e; }
.rm-loading-notice { margin: 11px auto 0; color: #dab45e; font-size: 12px; line-height: 1.4; }
.rm-loading-notice:empty { display: none; }
.rm-loading-retry { margin-top: 11px; }
.rm-loading-retry[hidden] { display: none; }
.rm-loading-footer { margin-top: 10px; color: #97aec2; font-size: 11px; line-height: 1.35; }
.rm-loading-footer-note { margin: 0; }
.rm-loading-website { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 2px 10px; color: #dab45e; font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.rm-loading-website:hover { color: #ffe5ae; }

/* Fill the existing outer overlay without inheriting the taller legacy home. */
#rmLandingOverlay:has(.rm-loading-screen, .rm-login-home) { align-items: safe center; }
#rmLandingOverlay:has(.rm-loading-screen) { padding: 12px; overflow: hidden; overscroll-behavior: none; }
#rmLandingHome:has(> .rm-loading-screen) { display: block; width: min(760px, calc(100vw - 24px)); height: min(660px, calc(100dvh - 24px)); min-height: 0; margin: 0; }

@media (max-width: 580px) {
  #rmLandingOverlay:has(.rm-loading-screen) { padding: 8px; }
  #rmLandingHome:has(> .rm-loading-screen) { width: min(calc(100vw - 16px), calc(100dvh - 16px)); height: min(620px, calc(100dvh - 16px)); }
  .rm-loading-screen { padding: 14px; }
  .rm-loading-header { flex-direction: column; gap: 9px; }
  .rm-loading-brand { text-align: center; }
  .rm-loading-redmoon { width: min(100%, 360px); }
  .rm-loading-ready-actions { grid-template-columns: 1fr; width: min(100%, 260px); min-height: clamp(102px, 20vh, 155px); }
  .rm-loading-auth { width: min(100%, 330px); padding: 12px; }
  .rm-loading-trusted { width: min(100%, 330px); padding: 12px; }
  .rm-loading-title { margin-top: 5px; }
  .rm-loading-intro { margin-bottom: 9px; font-size: 13px; }
  .rm-loading-checklist li { min-height: 47px; padding: 6px; font-size: 10px; }
  .rm-loading-stage-status { font-size: 9px; }
}
@media (max-height: 620px) {
  .rm-loading-screen { padding-top: 12px; padding-bottom: 10px; }
  .rm-loading-redmoon { width: min(100%, 330px); }
  .rm-loading-screen[data-rm-loading-state^="auth"] .rm-loading-redmoon { width: min(100%, 330px); }
  .rm-loading-ready-actions { min-height: clamp(86px, 19vh, 124px); }
  .rm-loading-title { margin: 4px 0; font-size: clamp(19px, 3vw, 24px); }
  .rm-loading-intro { margin-bottom: 7px; font-size: 12px; }
  .rm-loading-count { margin: 5px 0 6px; }
  .rm-loading-checklist li { min-height: 42px; padding: 5px 6px; }
  .rm-loading-footer { margin-top: 6px; }
  .rm-loading-footer-note { display: none; }
}
@media (max-height: 430px) {
  #rmLandingOverlay:has(.rm-loading-screen) { padding: 6px; }
  #rmLandingHome:has(> .rm-loading-screen) { width: min(700px, calc(100vw - 12px)); height: calc(100dvh - 12px); }
  .rm-loading-screen { padding: 8px 12px; }
  .rm-loading-header { gap: 8px; }
  .rm-loading-brand { font-size: 23px; }
  .rm-loading-subbrand { margin-top: 3px; }
  .rm-loading-redmoon { width: min(100%, 225px); }
  .rm-loading-ready-actions { min-height: 66px; }
  .rm-loading-login,
  .rm-loading-main-website { min-height: 40px; padding: 7px 12px; }
  .rm-loading-title { font-size: 18px; }
  .rm-loading-intro { display: none; }
  .rm-loading-count { margin: 3px 0; }
  .rm-loading-checklist li { min-height: 34px; padding: 4px; }
  .rm-loading-footer { display: none; }
  .rm-loading-screen[data-rm-loading-state^="auth"] .rm-loading-redmoon { display: none; }
  .rm-loading-auth { gap: 7px; padding: 10px; }
  .rm-loading-trusted { gap: 7px; padding: 10px; }
  .rm-loading-auth-fields { gap: 6px; }
  .rm-loading-auth-field input { min-height: 34px; padding: 6px 8px; }
  .rm-loading-auth-trust { font-size: 10px; }
  .rm-loading-auth-submit,
  .rm-loading-auth-back,
  .rm-loading-trusted-account,
  .rm-loading-trusted-password,
  .rm-loading-trusted-back { min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-loading-redmoon *,
  .rm-loading-redmoon::before,
  .rm-loading-redmoon::after,
  .rm-loading-screen button { animation: none !important; transition: none; }
}