/*
 * Developer additions on top of the design (portal.css, style.css, theme.css):
 * standalone sign-in pages and the night scene of the dark theme.
 */

/* Sign-in, sign-up, e-mail and password pages (and every page a guest sees) stand alone: no cabinet menu. */
body.is-standalone .sidebar,
body.is-standalone .mobile-nav,
body.is-standalone .profile-chip { display: none }
body.is-standalone .app-shell { grid-template-columns: minmax(0, 1fr) }
body.is-standalone .auth-wrap { width: min(1040px, 100%); margin-inline: auto }
@media (max-width: 900px) { body.is-standalone { padding-bottom: 0 } body.is-standalone .app-shell { padding-bottom: 24px } }

/* Separate buttons under the sign-in forms. */
.auth-form .btn + .btn, .auth-form .btn + a.btn { margin-top: 10px }

/* Dark theme: the same world at night — starry sky, square moon, moonlit water — instead of a dimmed day. */
html[data-theme="dark"] .world,
html[data-theme="dark"] .portal-world {
  background-color: #0b1020;
  background-image: url('/assets/cardboard-world-night-v1.jpg');
  filter: none;
  opacity: 1;
}
html[data-theme="dark"] .world:after,
html[data-theme="dark"] .portal-world:after { background: linear-gradient(180deg, rgba(6, 10, 24, .08), rgba(6, 10, 22, .45)) }
@media (max-width: 760px) { html[data-theme="dark"] .portal-world { background-image: url('/assets/cardboard-world-mobile-night-v1.jpg') } }
@media (max-width: 700px) { html[data-theme="dark"] .world { background-image: url('/assets/cardboard-world-mobile-night-v1.jpg') } }

/* A few stars twinkle over the picture's own stars. */
html[data-theme="dark"] .world:before,
html[data-theme="dark"] .portal-world:before {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 14%, #fff 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 19% 6%, #e8eeff 0 1px, transparent 2px),
    radial-gradient(circle at 31% 22%, #fff 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 44% 9%, #dfe8ff 0 1px, transparent 2px),
    radial-gradient(circle at 52% 27%, #fff 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 61% 5%, #fff 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 77% 18%, #e8eeff 0 1px, transparent 2px),
    radial-gradient(circle at 86% 8%, #fff 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 94% 25%, #fff 0 1px, transparent 2px);
  animation: md-twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes md-twinkle { 0% { opacity: .25 } 45% { opacity: .9 } 100% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] .world:before,
  html[data-theme="dark"] .portal-world:before { animation: none; opacity: .6 }
}