/* Shared page and embedded loading surfaces follow the selected application theme. */
.wp-app-loading { box-sizing: border-box; }
.wp-app-loading.wp-app-loading-full { min-height: 100vh; min-height: 100dvh; }

html[data-theme="light"] .wp-app-loading { background: #f5f6fb; color: #202438; }
html[data-theme="light"] .wp-loading-ambient { background: radial-gradient(circle at 50% 32%, rgba(116, 91, 208, .11), transparent 40%), linear-gradient(135deg, #f7f8fd, #f0f1fb); }
html[data-theme="light"] .wp-loading-ambient:after { opacity: .12; }
html[data-theme="light"] .wp-loading-ambient i { border-color: rgba(104, 80, 216, .08); }
html[data-theme="light"] .wp-loading-brand { color: #66569e; }
html[data-theme="light"] .wp-loading-content h2 { color: #202438; text-shadow: none; }
html[data-theme="light"] .wp-loading-content p { color: #526077; }
html[data-theme="light"] .wp-loading-status { color: #514977; }
html[data-theme="light"] .wp-loading-track { background: #d9d5e9; }
html[data-theme="light"] .wp-loading-signature { color: #71788d; }

/* Keep complete status and controls visible on short and mobile viewports. */
@media (max-height: 480px) {
  .wp-app-loading.wp-app-loading-full { padding: 38px 20px 30px; }
  .wp-app-loading-full .wp-loading-content { transform: none; }
  .wp-app-loading-full .wp-loading-orbit { width: 68px; height: 68px; margin-bottom: 8px; }
  .wp-app-loading-full .wp-loading-ring-inner { inset: 14px; }
  .wp-app-loading-full .wp-loading-content h2 { margin: 8px 0 2px; font-size: 26px; }
  .wp-app-loading-full .wp-loading-status { margin-top: 10px; }
  .wp-app-loading-full .wp-loading-track { margin-top: 10px; }
  .wp-app-loading-full .wp-loading-signature { bottom: 10px; }
  .project-opening-brand { top: 12px; }
  .project-opening-edition { top: 15px; }
  .project-opening-footer { display: none; }
  .project-opening-orbit { width: 68px; height: 68px; margin-bottom: 8px; }
  .project-opening-orbit .orbit-inner { inset: 12px; }
  .project-opening-orbit .orbit-core { inset: 29px; }
  .project-opening-content h1 { margin: 8px 0 3px; font-size: 25px; }
  .project-opening-content strong { margin-top: 10px; }
  .project-opening-progress { margin-top: 10px; }
}
@media (max-height: 300px) {
  .wp-app-loading.wp-app-loading-full { padding: 14px 16px 24px; }
  .wp-app-loading-full .wp-loading-orbit { width: 46px; height: 46px; margin-bottom: 4px; }
  .wp-app-loading-full .wp-loading-ring-inner { inset: 10px; }
  .wp-app-loading-full .wp-loading-brand, .wp-app-loading-full .wp-loading-signature { display: none; }
  .wp-app-loading-full .wp-loading-content h2 { margin: 4px 0 2px; font-size: 22px; }
  .wp-app-loading-full .wp-loading-content p { font-size: 12px; line-height: 1.3; }
  .wp-app-loading-full .wp-loading-status, .wp-app-loading-full .wp-loading-track { margin-top: 5px; }
  .project-opening-brand, .project-opening-edition, .project-opening-kicker { display: none; }
  .project-opening-orbit { width: 46px; height: 46px; margin-bottom: 4px; }
  .project-opening-orbit .orbit-inner { inset: 10px; }
  .project-opening-orbit .orbit-core { inset: 20px; }
  .project-opening-content h1 { margin: 4px 0 2px; font-size: 22px; }
  .project-opening-content strong, .project-opening-progress { margin-top: 5px; }
}

/* Account/help loading is a page-level transition, matching project opening. */
.product-dialog-loading { display: flex; gap: 0; padding: 0; background: var(--bg-base, #080a11); }
.product-dialog-loading .wp-app-loading { width: 100%; min-height: 100vh; min-height: 100dvh; padding: 64px 24px 80px; border: 0; border-radius: 0; box-shadow: none; }
.product-dialog-loading .wp-loading-content { width: min(520px, 88vw); transform: translateY(-2vh); }
.product-dialog-loading .wp-loading-orbit { width: 122px; height: 122px; margin-bottom: 25px; }
.product-dialog-loading .wp-loading-ring-inner { inset: 22px; }
.product-dialog-loading .wp-loading-content h2 { margin: 13px 0 5px; font-size: clamp(31px, 4vw, 43px); }
.product-dialog-loading .wp-loading-status { margin-top: 27px; }
.product-dialog-loading .wp-loading-track { margin-top: 19px; }
.product-dialog-loading .wp-loading-signature { display: none; }
.product-dialog-loading > .product-action { position: absolute; z-index: 2; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }
@media (max-width: 640px) {
  .product-dialog-loading .wp-loading-orbit { width: 104px; height: 104px; }
  .product-dialog-loading .wp-loading-content h2 { font-size: 32px; }
}
@media (max-height: 480px) {
  .product-dialog-loading .wp-app-loading { padding: 38px 20px 64px; }
  .product-dialog-loading .wp-loading-content { transform: none; }
  .product-dialog-loading .wp-loading-orbit { width: 68px; height: 68px; margin-bottom: 8px; }
  .product-dialog-loading .wp-loading-ring-inner { inset: 14px; }
  .product-dialog-loading .wp-loading-content h2 { margin: 8px 0 2px; font-size: 26px; }
  .product-dialog-loading .wp-loading-status { margin-top: 10px; }
  .product-dialog-loading .wp-loading-track { margin-top: 10px; }
  .product-dialog-loading > .product-action { bottom: max(10px, env(safe-area-inset-bottom)); }
}
@media (max-height: 300px) {
  .product-dialog-loading .wp-app-loading { padding: 14px 16px 54px; }
  .product-dialog-loading .wp-loading-orbit { width: 46px; height: 46px; margin-bottom: 4px; }
  .product-dialog-loading .wp-loading-ring-inner { inset: 10px; }
  .product-dialog-loading .wp-loading-brand { display: none; }
  .product-dialog-loading .wp-loading-content h2 { margin: 4px 0 2px; font-size: 22px; }
  .product-dialog-loading .wp-loading-content p { font-size: 12px; line-height: 1.3; }
  .product-dialog-loading .wp-loading-status, .product-dialog-loading .wp-loading-track { margin-top: 5px; }
}
