/*
 * Task #10921 — "never-blank boot" branded loading shell styles.
 *
 * Loaded as a same-origin render-blocking stylesheet from index.html so the
 * shell paints on the very first frame with NO JavaScript and NO extra
 * remote origins. CSP: style-src-elem already allows 'self', so this file
 * is the "already-permitted stylesheet mechanism" — style-src is NOT
 * weakened and no inline <style> element is introduced.
 *
 * Fail-safe direction: the shell markup in index.html defaults to
 * `hidden` via its inline style attribute (style-src-attr 'unsafe-inline'
 * is already allowed). Only THIS file turns it on, and only when #root is
 * NOT server-rendered. If this stylesheet ever fails to load, the page
 * behaves exactly as before this task (no shell) — it can never leave a
 * stray unstyled shell over real content.
 *
 * Ownership / precedence (keep in sync with the comment in index.html):
 *   1. Visible prerendered SSR content always wins — the sibling selector
 *      below keeps the shell hidden whenever #root carries data-pw-ssr.
 *   2. The pre-React startup guard (paints into an EMPTY #root on fatal
 *      bundle failures) explicitly hides the shell before painting.
 *   3. Otherwise the shell shows until src/lib/boot-shell.ts removes it via
 *      the canonical route-readiness API — nothing else may remove it.
 *   4. If nothing ever declares readiness, the CSS-only delayed reveal
 *      below flips the shell into its branded recovery state at ~8s, so
 *      even a fully JS-blocked visitor gets a native reload link instead
 *      of an infinite spinner.
 */

/* The markup ships with a fail-safe inline `style="display:none"` (see the
 * index.html comment). This rule is the ONLY thing that turns the shell on:
 * !important beats the inline attribute, and the guards in the selector keep
 * it off over SSR content ([data-pw-ssr]) and after the startup guard or
 * boot module hides it ([hidden]). If this file never loads, the shell
 * simply stays off — status quo, never a broken overlay. */
#root:not([data-pw-ssr]) ~ #pw-boot-shell:not([hidden]) {
  display: flex !important;
}

#pw-boot-shell {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: #142d52;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  text-align: center;
}

/* Never over visible SSR content (prerendered pages stamp data-pw-ssr on
 * #root and their markup is VISIBLE — task #10348). Pure CSS so the rule
 * holds even with JavaScript disabled. !important beats the inline
 * `style="display:flex"` fail-safe attribute described above. */
#root[data-pw-ssr] ~ #pw-boot-shell {
  display: none !important;
}

/* The startup guard / boot module hide the shell via the hidden attribute
 * (and the readiness API removes the element outright). */
#pw-boot-shell[hidden] {
  display: none !important;
}

.pw-bs-inner {
  max-width: 420px;
  width: 100%;
}

.pw-bs-logo {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pw-bs-logo .pw-bs-peak {
  color: #4ade80;
}

.pw-bs-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 26px 0 14px;
}

.pw-bs-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  animation: pw-bs-pulse 1.2s ease-in-out infinite;
}

.pw-bs-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.pw-bs-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes pw-bs-pulse {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Reduced-motion fallback: static dots, no pulsing. The delayed recovery
 * reveal below is a one-shot state flip (not motion) and is kept. */
@media (prefers-reduced-motion: reduce) {
  .pw-bs-dots span {
    animation: none;
    opacity: 0.7;
    transform: none;
  }
}

.pw-bs-loading {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.85;
}

/* ── Recovery state ──────────────────────────────────────────────────────
 * Hidden while loading. Revealed either:
 *   (a) by boot-shell.ts setting data-state="recovery" (classified failure
 *       or the ~8s JS boot timeout), or
 *   (b) with JavaScript blocked/dead, by the CSS-only 8s animation-delay
 *       reveal — a zero-duration forwards animation acting as a timer.
 * When recovery reveals, the loading dots/copy hide on the same schedule so
 * the shell never "spins indefinitely". */
.pw-bs-recovery {
  opacity: 0;
  visibility: hidden;
  animation: pw-bs-reveal 0s linear 8s forwards;
}

/* The dots container / copy don't pulse themselves — only their child
 * spans do — so give them the conceal animation alone. */
.pw-bs-dots {
  animation: pw-bs-conceal 0s linear 8s forwards;
}

.pw-bs-loading {
  animation: pw-bs-conceal 0s linear 8s forwards;
}

@keyframes pw-bs-reveal {
  to {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes pw-bs-conceal {
  to {
    display: none;
  }
}

/* JS-owned recovery: boot-shell.ts flips data-state ahead of (or instead
 * of) the CSS timer when it classifies a failure. */
#pw-boot-shell[data-state="recovery"] .pw-bs-recovery {
  opacity: 1;
  visibility: visible;
  animation: none;
}

#pw-boot-shell[data-state="recovery"] .pw-bs-dots,
#pw-boot-shell[data-state="recovery"] .pw-bs-loading {
  display: none;
}

.pw-bs-r-title {
  margin: 22px 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.pw-bs-r-msg {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.85;
}

.pw-bs-retry {
  display: inline-block;
  border: 0;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 600;
  background: #ffffff;
  color: #142d52;
  text-decoration: none;
  cursor: pointer;
}

/* Support line: shown only once bounded automatic retries are exhausted
 * (boot-shell.ts stamps data-retries="exhausted"). */
.pw-bs-support {
  display: none;
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.75;
}

#pw-boot-shell[data-retries="exhausted"] .pw-bs-support {
  display: block;
}