/* Save-status indicator (#171) — a quiet, Google-Docs-style
   "Saving… / All changes saved" beside the tree title, replacing the per-save
   toast. The idle state is hidden, so it's invisible before the first save and
   in the no-auth demo (which never persists). */
.save-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  user-select: none;
}

.save-status[data-state="idle"] {
  display: none;
}

.save-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-text-faint);
  flex: none;
}

.save-status[data-state="pending"] .save-status__dot,
.save-status[data-state="saving"] .save-status__dot {
  background-color: var(--color-accent);
  animation: save-status-pulse 1.1s ease-in-out infinite;
}

.save-status[data-state="saved"] .save-status__dot {
  background-color: var(--color-success);
}

.save-status[data-state="error"] {
  color: var(--color-error);
}

.save-status[data-state="error"] .save-status__dot {
  background-color: var(--color-error);
  animation: none;
}

/* "Retry" shows only in the error state. */
.save-status__retry {
  display: none;
  border: none;
  background: none;
  padding: 0 0 0 var(--space-xxs);
  font: inherit;
  font-weight: var(--font-weight-medium);
  color: var(--color-error);
  text-decoration: underline;
  cursor: pointer;
}

.save-status[data-state="error"] .save-status__retry {
  display: inline-flex;
  align-items: center;
}

.save-status__retry:hover {
  text-decoration: none;
}

@keyframes save-status-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .save-status[data-state="pending"] .save-status__dot,
  .save-status[data-state="saving"] .save-status__dot {
    animation: none;
  }
}

/* Touch: give the rare "Retry" a comfortable tap area. */
@media (hover: none) and (pointer: coarse) {
  .save-status__retry {
    padding: var(--space-xxs) var(--space-xs);
  }
}

/* Narrow toolbar: keep the dot as a compact saved/saving/error cue, drop the
   label text so it can't crowd the title or wrap. */
@media (max-width: 640px) {
  .save-status__label {
    display: none;
  }
}