/* The boot indicator. Uses the site's own tokens; no new colours. */

.boot {
  display: grid;
  gap: 10px;
  max-width: 520px;
}

.boot-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 12px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

.boot-detail {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--fg2);
}

.boot-spin {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--line);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: boot-spin 0.7s linear infinite;
}

.boot.is-done .boot-spin {
  border-color: var(--acc);
  animation: none;
}

.boot.is-failed .boot-spin {
  border-color: var(--amber);
  animation: none;
}

.boot.is-failed .boot-label,
.boot.is-failed .boot-detail {
  color: var(--amber);
}

.boot-track {
  height: 2px;
  background: var(--line2);
  border-radius: 1px;
  overflow: hidden;
}

.boot-fill {
  height: 100%;
  width: 0;
  background: var(--acc);
  /* Bytes arrive in bursts; a short ease keeps the bar from stuttering
     without letting it drift away from the number beside it. */
  transition: width 120ms linear;
}

/* Work with no measurable extent: a travelling sliver, not a frozen bar. */
.boot.is-indeterminate .boot-fill {
  width: 30%;
  transition: none;
  animation: boot-slide 1.1s ease-in-out infinite;
}

@keyframes boot-spin {
  to { transform: rotate(360deg); }
}

@keyframes boot-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(333%); }
}

@media (prefers-reduced-motion: reduce) {
  .boot-spin { animation: none; }
  .boot.is-indeterminate .boot-fill { animation: none; width: 100%; opacity: 0.35; }
  .boot-fill { transition: none; }
}