/* Fast interactions (docs/features/fast-interactions.md): progress bar, pending rows, field errors.
   Tokens only. The global reduced-motion rule in tokens.css stops the spinner and the highlight. */

/* F-5: Turbo's progress bar (shown after 400 ms, app/javascript/application.js). */
.turbo-progress-bar {
  height: 3px;
  background: var(--k-lime-strong);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-ink) 12%, transparent);
}

/* F-2: the muted row shown while a save is in flight. */
.pending-row { color: var(--k-text-muted); }
.pending-row b, .pending-row td { color: var(--k-text-muted); }
.pending-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--k-text-muted); }
.weight-item.pending-row { opacity: .85; }
.spinner {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: var(--k-r-pill);
  border: 2px solid var(--k-line);
  border-top-color: var(--k-ink);
  animation: k-spin .8s linear infinite;
}
@keyframes k-spin { to { transform: rotate(360deg); } }

/* A row the save just added: a short lime wash (none with reduced motion, tokens.css). */
.is-new { animation: k-new 2.4s var(--k-ease-out) both; }
@keyframes k-new { 0%, 40% { background: var(--k-tag-food-bg); } 100% { background: transparent; } }

/* F-1: local validation (local_validation_controller.js). */
.input[aria-invalid=true], .vf-name[aria-invalid=true], .vf-pval[aria-invalid=true] { border-color: var(--k-tag-skin-fg); }
.vf-name[aria-invalid=true] { box-shadow: inset 0 -2px 0 var(--k-tag-skin-fg); }
.wz-stepper-wrap.is-invalid .wz-big, .wz-stepper-wrap:has([aria-invalid=true]) .wz-big { color: var(--k-tag-skin-fg); }
.local-error { margin-top: 4px; }

/* The live "change vs the last weighing" under the weight stepper. */
.weight-change { display: block; margin: 0; font-size: 13px; }
.weight-change[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--k-text-muted); }
  .is-new { animation: none; }
}