/* =========================================================================
   Component — the proof-of-work progress
   -------------------------------------------------------------------------
   Styles for what assets/js/challenge-progress.js renders. Two pages mount it
   — registration and the verification resend — so it is a component.

   THE BAR IS INDETERMINATE, AND THAT IS THE HONEST SHAPE. The work is
   memoryless: having done half the expected number of hashes says nothing about
   being half done, so a determinate bar built on the mean would sit at 100 %
   about a third of the time and keep going, which makes a working page look
   stuck. The animation says "running"; the count beside it says how much.

   `prefers-reduced-motion` is honoured in base.css, which flattens every
   animation to a millisecond. The bar then sits still while the count moves —
   still an honest signal, without the sliding block.
   ========================================================================= */

.challenge-progress {
  margin: 0 0 16px;
}

/* THE BAR ROLES, and this is the one bar the frontend has today
   (DESIGN_TOKENS.md §9.4). The track was --sd-surface-alt, which is below the
   surface in light and above it in dark — a channel cut into the card in one
   theme and a raised rail in the other (L-FE-44). --sd-bar-track resolves to
   the recess in both.

   `--sd-bar-done` has no caller here and that is correct rather than an
   omission: this bar is INDETERMINATE by design, and it is removed from the
   page when the work completes rather than turning green. A `done` colour on a
   bar that never shows a finished state would be a token invented for the
   token's sake. */
.challenge-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--sd-bar-track);
  overflow: hidden;
}

.challenge-bar-fill {
  width: 40%;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--sd-bar-fill);
  animation: sd-challenge 1.1s ease-in-out infinite;
}

@keyframes sd-challenge {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.challenge-text {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--doc-ink-soft);
}

.challenge-count {
  font-family: var(--mono);
}