/* Shared by / and /new. Native values keep changing widths out of inline styles. */
.upload-progress-label.upload-progress-label,
#transfer-status.upload-progress-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  width: 100%;
  box-sizing: border-box;
  margin: 16px 0 8px;
  color: var(--progress-label-color, #205a9d);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.upload-progress-metrics {
  flex: 0 1 auto;
  margin-left: auto;
  max-width: 58%;
  color: #52667d;
  font-size: 12px;
  font-weight: 400;
  text-align: right;
}
.upload-progress-bar.upload-progress-bar {
  --progress-color: #2479dd;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 14px;
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #e5edf7;
  box-shadow: inset 0 1px 3px #1b45751a;
  accent-color: var(--progress-color);
}
.upload-progress-bar[data-phase="hashing"] { --progress-color: #5886c9; }
.upload-progress-bar[data-phase="verifying"] { --progress-color: #6558bc; }
.upload-progress-bar[data-phase="verified"] { --progress-color: #228455; }
.upload-progress-label[data-phase="verifying"] { --progress-label-color: #594ca7; }
.upload-progress-label[data-phase="verified"] { --progress-label-color: #207948; }
.upload-verification[data-verification="mismatch"] .upload-progress-label { --progress-label-color: #b52b27; }
.upload-progress-bar.upload-progress-bar::-webkit-progress-bar {
  background: #e5edf7;
  border-radius: 999px;
  box-shadow: inset 0 1px 3px #1b45751a;
}
.upload-progress-bar.upload-progress-bar::-webkit-progress-value {
  border-radius: 999px;
  background-color: var(--progress-color);
  background-image: repeating-linear-gradient(115deg, transparent 0 10px, #ffffff25 10px 20px);
  background-size: 44px 100%;
  transition: width .28s ease-out, background-color .2s ease;
  animation: upload-progress-stripes 1.8s linear infinite;
}
.upload-progress-bar.upload-progress-bar::-moz-progress-bar {
  border-radius: 999px;
  background-color: var(--progress-color);
  background-image: repeating-linear-gradient(115deg, transparent 0 10px, #ffffff25 10px 20px);
  background-size: 44px 100%;
  transition: width .28s ease-out, background-color .2s ease;
  animation: upload-progress-stripes 1.8s linear infinite;
}
/* Indeterminate comparison has no invented percentage or ETA. */
.upload-progress-bar:indeterminate {
  background: linear-gradient(100deg, #e5edf7 20%, #b6afe3 48%, #e5edf7 76%);
  background-size: 200% 100%;
  animation: upload-progress-stripes 1.8s linear infinite;
}
.upload-progress-bar:indeterminate::-webkit-progress-bar { background: transparent; }
.upload-progress-bar[data-phase="verified"]::-webkit-progress-value { animation: none; background-image: none; }
.upload-progress-bar[data-phase="verified"]::-moz-progress-bar { animation: none; background-image: none; }
.upload-progress-bar.upload-progress-bar[hidden],
.upload-progress-label.upload-progress-label[hidden] { display: none; }
@keyframes upload-progress-stripes { to { background-position: 44px 0; } }
@media (prefers-reduced-motion: reduce) {
  .upload-progress-bar:indeterminate { animation: none; }
  .upload-progress-bar.upload-progress-bar::-webkit-progress-value { animation: none; transition: none; }
  .upload-progress-bar.upload-progress-bar::-moz-progress-bar { animation: none; transition: none; }
}

/* Shared deletion state and recoverable in-card upload errors. */
.kl-delete-pending { margin: 12px auto 4px; max-width: 240px; }
.kl-delete-pending[hidden] { display: none; }
.kl-delete-pending progress { display: block; width: 100%; height: 12px; accent-color: #2f7de1; }
form[aria-busy="true"] input[type="submit"], form[aria-busy="true"] button[type="submit"] { cursor: wait; opacity: .65; }
.kl-ui-error { box-sizing: border-box; width: 100%; max-width: 560px; margin: 16px auto; padding: 20px; border: 1px solid #ded5d3; border-radius: 8px; background: #fff; text-align: center; overflow-wrap: anywhere; }
.kl-ui-error h2 { margin: 0 0 16px; color: #a32a20; font-size: 18px; }
.kl-ui-error p { line-height: 1.8; white-space: pre-line; }
.kl-ui-error button { min-height: 40px; padding: 8px 28px; cursor: pointer; }
@media (max-width: 520px) {
  .upload-progress-label.upload-progress-label { flex-wrap: wrap; }
  .upload-progress-metrics { flex-basis: 100%; max-width: 100%; margin-left: 0; text-align: left; overflow-wrap: anywhere; }
}