/* The webmail's own pages outside the mail (webmail-login.html, webmail-down.html): the panel's
   login look (style.css: the floating mail icons, the card, its fields and button), and the page
   that says the mail can't be reached right now. */
/* The mail out of reach (webmail-down.html): a card in the middle, a way to try again and out */
body.webmail-page { display: grid; min-height: 100vh; min-height: 100dvh; place-items: center; padding: 1.5rem 1rem; }
.webmail-down-card {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  width: min(26rem, 100%);
  padding: 2rem 1.5rem 1.6rem;
  border: 1px solid var(--line, rgba(123, 150, 255, 0.16));
  border-radius: 18px;
  background: var(--card, #111a40);
  text-align: center;
}
.webmail-down-logo { border-radius: 14px; }
.webmail-down-card h1 { margin: 0.3rem 0 0; font-size: 1.3rem; }
.webmail-down-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.webmail-down-actions { display: grid; gap: 0.6rem; width: 100%; margin-top: 0.8rem; }
.webmail-down-actions form { margin: 0; }
.webmail-down-retry, .webmail-down-out {
  display: block;
  width: 100%;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.webmail-down-retry { background: #2f7df6; color: #fff; }
.webmail-down-out { overflow: hidden; background: rgba(123, 150, 255, 0.12); color: inherit; text-overflow: ellipsis; white-space: nowrap; }

/* From the login to the inbox (and back, on logging out): a soft cross-fade, where the browser
   can do one (webmail-app.css) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }
}