/* ------------------------------------------------------------------
   CONNECTION LOST (7.120.0, #fo_connection_lost in
   R/dot-fo_connection_lost_ui.R, driven by inst/www/fo_connection.js)
   The loading panel's card (custom.css, LOADING PANEL) for a page that
   lost its server: a ring, a title, a status line and one button, over
   the dimmed page, in the page's theme. Centred and symmetric, so the
   right-to-left page needs nothing of its own.
   ------------------------------------------------------------------ */

/* Shiny's grey page and Shiny Server's grey page and dark box give way to
   the card. The elements stay in the page: the guide (fo_guide.js) and the
   synthetic sign-in check look for #shiny-disconnected-overlay, and
   fo_connection.js for Shiny Server's #ss-reload-link. */
#shiny-disconnected-overlay,
#ss-overlay,
#ss-connect-dialog {
  display: none !important;
}

#fo_connection_lost {
  --fo-connection-scrim: rgba(15, 23, 42, 0.45);
  --fo-connection-surface: #ffffff;
  --fo-connection-text: #141a2a;
  --fo-connection-muted: #5b6579;
  --fo-connection-track: rgba(10, 88, 202, 0.14);
  --fo-connection-accent: #0a58ca;
  --fo-connection-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background-color: var(--fo-connection-scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fo-connection-fade-in 0.2s ease-out;
}
#fo_connection_lost[hidden],
#fo_connection_lost [hidden] {
  display: none !important;
}
/* Dark with the app's dark theme, and on a page before sign-in unless the
   visitor picked light: the landing page is dark until then, with nothing
   set on <html> (R/app_ui.R, the landing page's theme). */
html[data-bs-theme="dark"] #fo_connection_lost,
html:not([data-fo-landing-theme="light"]):not([data-bs-theme="light"]) body:not([data-app-state="authenticated"]) #fo_connection_lost {
  --fo-connection-scrim: rgba(5, 8, 15, 0.6);
  --fo-connection-surface: #1b2232;
  --fo-connection-text: #e8ecf4;
  --fo-connection-muted: #a8b0c8;
  --fo-connection-track: rgba(106, 169, 255, 0.18);
  --fo-connection-accent: #6aa9ff;
  --fo-connection-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
#fo_connection_lost .fo-connection-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 380px;
  padding: 28px 32px;
  border-radius: 16px;
  background-color: var(--fo-connection-surface);
  color: var(--fo-connection-text);
  box-shadow: var(--fo-connection-shadow);
  text-align: center;
  outline: none;
}
#fo_connection_lost .fo-connection-ring {
  width: 44px;
  height: 44px;
  animation: fo-connection-rotate 1.6s linear infinite;
}
/* Back: nothing is turning any more, the button is the next step. */
#fo_connection_lost[data-state="back"] .fo-connection-ring {
  display: none;
}
#fo_connection_lost .fo-connection-track,
#fo_connection_lost .fo-connection-arc {
  fill: none;
  stroke-width: 4;
}
#fo_connection_lost .fo-connection-track {
  stroke: var(--fo-connection-track);
}
#fo_connection_lost .fo-connection-arc {
  stroke: var(--fo-connection-accent);
  stroke-linecap: round;
  stroke-dasharray: 1 150;
  stroke-dashoffset: 0;
  animation: fo-connection-dash 1.4s ease-in-out infinite;
}
#fo_connection_lost .fo-connection-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fo-connection-text);
}
#fo_connection_lost .fo-connection-status {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fo-connection-muted);
  font-variant-numeric: tabular-nums;
}
#fo_connection_lost #fo_connection_action {
  min-width: 140px;
  margin-top: 4px;
}
@keyframes fo-connection-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fo-connection-rotate {
  100% { transform: rotate(360deg); }
}
@keyframes fo-connection-dash {
  0%   { stroke-dasharray: 1 150;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90 150; stroke-dashoffset: -124; }
}
@media (prefers-reduced-motion: reduce) {
  #fo_connection_lost {
    animation: none;
  }
  #fo_connection_lost .fo-connection-ring {
    animation-duration: 3s;
  }
  #fo_connection_lost .fo-connection-arc {
    animation: none;
    stroke-dasharray: 60 150;
  }
}