/* Upload screen — the progress bar driven by js/upload.js.
 *
 * Shared so the demo harness (test/ui/harness/upload-demo.html) renders the
 * exact same bar the app does. Keeping a private copy in the harness would let
 * the two drift, and a demo that looks right while the app looks wrong is
 * worse than no demo.
 *
 * Colour variables come from css/styles.css.
 */

.progress-wrap {
  width: min(320px, 80vw);
  height: 6px;
  background: var(--line-strong);
  border-radius: 3px;
  overflow: hidden;
}

#progress-bar {
  height: 100%;
  width: 0%;
  background: var(--orange);
  border-radius: 3px;
  /* Short and linear: byte-level events arrive faster than a long ease can
   * settle, so a slow transition leaves the bar visibly chasing the real
   * value instead of showing it. */
  transition: width .08s linear;
}

/* Unused: nothing adds this class today. Kept because an indeterminate state
 * is still wanted for the pre-flight phase (while frames are encoding and no
 * byte total is known yet). Note the sliding animation reads as oscillation,
 * so it must never be combined with determinate width updates. */
#progress-bar.indeterminate {
  width: 30% !important;
  animation: progress-slide 1.2s ease-in-out infinite;
}
@keyframes progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(430%); }
}

#upload-label {
  font-size: .9rem;
  opacity: .7;
  min-height: 1.4em;
}

/* ── Recovery controls ──────────────────────────────────────────────────────
 * Hidden until the upload needs a decision from the user: frames still missing
 * after the automatic retries, or a failed commit. Kept here rather than in
 * app.html so the demo harness shows the same buttons.
 */
.upload-actions {
  display: none;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .5rem;
}
.upload-actions.visible { display: flex; }

.upload-actions button {
  font-family: 'Oswald', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 8px;
  padding: .7rem 1.5rem;
  cursor: pointer;
  border: 2px solid var(--orange);
  background: var(--orange);
  color: var(--black);
  transition: background .15s, transform .1s;
}
.upload-actions button:active { transform: scale(.97); }
.upload-actions button:hover { background: var(--orange-deep); border-color: var(--orange-deep); }

/* Secondary: proceeding without the missing frames is a real choice, but the
 * retry should read as the recommended one. */
.upload-actions button.secondary {
  background: transparent;
  color: var(--cream);
  border-color: var(--line-strong);
}
.upload-actions button.secondary:hover {
  background: transparent;
  border-color: var(--cream);
}

#upload-detail {
  font-size: .82rem;
  opacity: .55;
  min-height: 1.2em;
  text-align: center;
}