/* Live Component states (ui.md §2.1, §4.3).
   - Inline fields: the wrapper carries data-sv-state="idle|saving|saved|error"
     (set by the inline-field controller and the server render); the visuals
     reuse the inline-edit.css states (.is-saving, .is-saved, .is-error).
   - [data-loading] visibility comes from the live.min.css autoimport
     (assets/controllers.json).
   - .is-live-busy / [aria-busy="true"] sections get the loading overlay that
     loading.css defines for refreshing fragments. */

/* Inline fields driven by data-sv-state. */
.sv-inline[data-sv-state="saving"] :is(input, select, textarea) { background-color: var(--sv-color-surface-muted); }
.sv-inline[data-sv-state="saving"] .sv-inline__state { color: var(--sv-color-text-muted); }
.sv-inline[data-sv-state="saving"] .sv-inline__state::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sv-spin 0.8s linear infinite;
}
.sv-inline[data-sv-state="saving"] .sv-inline__state:empty { visibility: visible; }

.sv-inline[data-sv-state="saved"] .sv-inline__state { color: var(--sv-color-success-text); }
.sv-inline[data-sv-state="saved"] :is(input, select, textarea) {
  border-color: var(--sv-success-border);
  animation: sv-saved-flash 1.2s var(--sv-ease);
}

.sv-inline[data-sv-state="error"] :is(input, select, textarea) {
  border-color: var(--sv-color-danger);
  box-shadow: inset 3px 0 0 var(--sv-color-danger);
}
.sv-inline[data-sv-state="error"] .sv-inline__state { color: var(--sv-error-fg); }

/* Busy sections (Live roots get aria-busy through data-loading). */
.is-live-busy,
[data-live-name-value][aria-busy="true"] { position: relative; }
.is-live-busy::after,
[data-live-name-value][aria-busy="true"]::after {
  content: "";
  position: absolute;
  z-index: var(--sv-z-sticky);
  inset: 0;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.5);
  animation: sv-fade-in var(--sv-duration) var(--sv-ease) 300ms both;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sv-inline[data-sv-state="saving"] .sv-inline__state::before { animation: none; }
}