/* Canonical loading, empty and transient feedback states for every Web page. */

.skeleton {
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 50%, #eef1f6 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s infinite;
}

@keyframes skeleton-shimmer {
  to { background-position: -200% 0; }
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-default);
  border-top-color: var(--primary);
  border-radius: var(--radius-full);
  vertical-align: -3px;
  animation: spinner-turn 0.8s linear infinite;
}

@keyframes spinner-turn {
  to { transform: rotate(360deg); }
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--border-emphasis);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  text-align: center;
}

.empty-state.is-plain {
  border-color: transparent;
  background: transparent;
}

.empty-state.is-compact {
  padding: var(--space-5) var(--space-4);
}

.empty-state-icon {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-1);
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 18px;
}

.empty-state strong {
  color: var(--text);
  font-size: var(--text-base);
}

.empty-state p {
  margin: 0;
  font-size: var(--text-sm);
}

.app-loading-state {
  min-height: 120px;
  color: var(--text-secondary);
}

.app-error-text {
  color: var(--bad);
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  max-width: min(360px, calc(100vw - 44px));
  padding: 11px 15px;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  animation: toast-in var(--dur-med) var(--ease);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}