.loading-status {
  display: inline-grid;
  grid-template-columns: auto minmax(110px, 170px);
  align-items: center;
  gap: 12px;
  visibility: hidden;
  transition: opacity .18s ease;
}

.htmx-request .loading-status,
.htmx-request.loading-status {
  visibility: visible;
}

.loading-copy {
  white-space: nowrap;
}

.loading-track {
  position: relative;
  width: clamp(110px, 14vw, 170px);
  height: 6px;
  overflow: hidden;
  background: #d7d7ce;
  border: 1px solid var(--ink);
}

.loading-track > span {
  position: absolute;
  inset: 0;
  width: 45%;
  background: var(--orange);
  animation: loading-scan 1.05s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes loading-scan {
  0% { transform: translateX(-110%); }
  50% { width: 65%; }
  100% { transform: translateX(245%); }
}

@media (max-width: 620px) {
  .form-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .loading-status {
    width: 100%;
    grid-template-columns: auto 1fr;
  }

  .loading-track {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-track > span {
    width: 100%;
    animation: loading-pulse 1.2s ease-in-out infinite alternate;
  }

  @keyframes loading-pulse {
    from { opacity: .35; }
    to { opacity: 1; }
  }
}