/* Login copy follows the selected theme, not the 3D world's solar time.
   The world may report day while the auth chapter is still in dark space. */
#aulama-auth.auth-login-page :is(.auth-intro, .auth-foot) {
  --ink: #142035;
  --ink-2: #36475e;
  --ink-3: #516078;
  --accent: #0f6e3c;
  --b1: #357019;
  --b2: #12643b;
  --b3: #0c6260;
  --grad: linear-gradient(115deg, var(--b1), var(--b2) 50%, var(--b3));
  --glass-bg: rgba(250, 251, 249, .94);
  --glass-hi: rgba(255, 255, 255, .9);
  --glass-edge: rgba(15, 22, 45, .14);
  color: var(--ink);
}

:root[data-theme="dark"] #aulama-auth.auth-login-page :is(.auth-intro, .auth-foot) {
  --ink: #f2f4f9;
  --ink-2: #c6cdda;
  --ink-3: #a9b1c0;
  --accent: #5ee08f;
  --b1: #c4f06a;
  --b2: #4ade80;
  --b3: #2dd4bf;
  --glass-bg: rgba(9, 16, 23, .94);
  --glass-hi: rgba(255, 255, 255, .28);
  --glass-edge: rgba(255, 255, 255, .18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #aulama-auth.auth-login-page :is(.auth-intro, .auth-foot) {
    --ink: #f2f4f9;
    --ink-2: #c6cdda;
    --ink-3: #a9b1c0;
    --accent: #5ee08f;
    --b1: #c4f06a;
    --b2: #4ade80;
    --b3: #2dd4bf;
    --glass-bg: rgba(9, 16, 23, .94);
    --glass-hi: rgba(255, 255, 255, .28);
    --glass-edge: rgba(255, 255, 255, .18);
  }
}

#aulama-auth.auth-login-page .auth-intro-lead {
  color: var(--ink-2);
  opacity: 1;
}

/* Remove the old negative logo margin and leave room above both controls. */
.auth-login-page .auth-header {
  padding-top: calc(env(safe-area-inset-top, 0px) + 24px);
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-bottom: 12px;
}

.auth-login-page .auth-header .brand img { margin-block: 0; }
.auth-login-page .auth-header .theme-button { display: inline-grid; }

@media (max-width: 760px), (pointer: coarse) {
  .auth-login-page {
    --auth-safe-top: max(24px, env(safe-area-inset-top, 0px));
    --auth-header-height: calc(var(--auth-safe-top) + 84px);
  }
  .auth-login-page .auth-header { padding-top: calc(var(--auth-safe-top) + 12px); }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  .auth-login-page {
    --auth-safe-top: max(16px, env(safe-area-inset-top, 0px));
    --auth-header-height: calc(var(--auth-safe-top) + 60px);
  }
  .auth-login-page .auth-header { padding-top: var(--auth-safe-top); }
}