/* Keep the server shell private until all initial UI renderers have completed. */
html[data-panel-pending] #app-shell,
html[data-panel-pending] #login-screen { display: none !important; }
html[data-panel-pending] #auth-startup-screen { display: grid !important; }
#auth-startup-screen { width: 100%; place-items: center; }
html[data-panel-startup-failed] #auth-startup-progress { display: none !important; }

/* Authentication geometry loads before the workspace and stays theme-independent. */
#login-screen.login-screen {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 0;
  padding: 72px 24px;
}
#login-screen .login-intro { display: none; }
#login-screen .login-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  min-width: 0;
  justify-self: center;
  padding: 28px;
}
#login-screen .login-card h2 { margin: 16px 0 12px; font-size: 22px; line-height: 1.3; }
#login-screen .login-card > p { margin: 0 0 20px; }
#login-screen .login-card .stack { margin: 24px 0 20px; }
#login-screen .login-card .help { margin: 0; line-height: 1.5; }
#login-screen .login-card .button { width: 100%; min-height: 44px; }
#login-screen .login-appearance { position: absolute; top: 16px; right: 16px; }
@media (max-width: 480px) {
  #login-screen.login-screen { padding: 72px 16px; }
  #login-screen .login-card { padding: 24px 20px; }
}