/* Inline edit field (ui.md §4.3): <div class="sv-inline" data-sv-inline data-sv-state>
   + control + <span class="sv-inline__state" role="status">. States is-dirty|is-saving|is-saved|is-error. */

.sv-inline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-1);
  min-width: 0;
}
.sv-inline__row {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-width: 0;
}
.sv-inline__row > :is(input, select, textarea, .sv-input, .sv-select) { flex: 1 1 auto; min-width: 0; }

.sv-inline__state {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  min-height: 1.25rem;
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-xs);
  font-weight: var(--sv-weight-medium);
  white-space: nowrap;
}
.sv-inline__state:empty { visibility: hidden; }
.sv-inline__state .sv-icon { width: 1rem; height: 1rem; }

.sv-inline.is-dirty :is(input, select, textarea) { border-color: var(--sv-color-focus); }
.sv-inline.is-dirty .sv-inline__state { color: var(--sv-color-link); }

.sv-inline.is-saving :is(input, select, textarea) { background-color: var(--sv-color-surface-muted); }
.sv-inline.is-saving .sv-inline__state .sv-icon { animation: sv-spin 0.8s linear infinite; }

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

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

.sv-inline__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-1) var(--sv-space-2);
  padding: var(--sv-space-1) var(--sv-space-2);
  border-radius: var(--sv-radius-sm);
  background: var(--sv-error-bg);
  color: var(--sv-error-fg);
  font-size: var(--sv-text-sm);
}
.sv-inline__error:empty { display: none; }
.sv-inline__error .sv-link-button { color: inherit; font-weight: var(--sv-weight-semibold); }

/* Locked value (read-only with reason). */
.sv-inline.is-locked :is(input, select, textarea) { border-style: dashed; }
.sv-inline__lock {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-xs);
}

/* Compact variant inside dense tables. */
.sv-table .sv-inline :is(input, select) {
  min-width: 7rem;
  min-height: var(--sv-control-height-sm);
  padding-block: 0.125rem;
  font-size: var(--sv-text-dense);
}
@media (pointer: coarse) {
  .sv-table .sv-inline :is(input, select) { min-height: var(--sv-control-height); font-size: 1rem; }
}

@keyframes sv-saved-flash {
  0% { background-color: var(--sv-success-bg); }
  100% { background-color: var(--sv-color-surface); }
}