/*
 * Boot placeholder styles. Loaded as a static stylesheet from the document head
 * so it paints before the JS bundle downloads — the iframe never shows blank.
 * CSP-safe (style-src 'self'); inline styles would be blocked. React removes
 * the #boot-skeleton markup when it mounts, after which these rules match
 * nothing. Class-prefixed with `boot-` so they can't collide with app styles.
 */
#boot-skeleton {
  margin: 0 auto;
  width: 100%;
  max-width: 42rem;
  padding: 1.5rem 1rem;
  text-align: center;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.boot-logo {
  margin: 0 auto 1.5rem;
  display: block;
  width: 8rem;
  height: auto;
}

.boot-bar {
  background-color: #e7ebf0;
  border-radius: 4px;
}

.boot-heading {
  height: 1.5rem;
  margin: 0 auto 0.625rem;
}

.boot-heading.boot-w-70 {
  width: 70%;
}

.boot-heading.boot-w-55 {
  width: 55%;
}

.boot-line {
  height: 0.75rem;
  margin: 0 auto 0.5rem;
}

.boot-line.boot-w-90 {
  width: 90%;
}

.boot-line.boot-w-80 {
  width: 80%;
}

.boot-fields {
  margin-top: 2rem;
  display: grid;
  gap: 0.75rem;
}

.boot-input {
  height: 2.75rem;
}

.boot-row {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .boot-row {
    grid-template-columns: 1fr 1fr;
  }
}

.boot-button {
  height: 2.75rem;
  width: 8rem;
  margin-top: 0.5rem;
  background-color: #20386c;
  opacity: 0.25;
  border-radius: 4px;
}

@keyframes boot-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

#boot-skeleton .boot-bar {
  animation: boot-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #boot-skeleton .boot-bar {
    animation: none;
  }
}