/* =========================================================================
   TT Feedback — toasts, skeleton loaders, modals, and the governing
   loading/empty/error/success state table. Design Bible §16.
   ========================================================================= */

/* --- Toasts --------------------------------------------------------------
   Calm, not celebratory. No confetti, no exclamation points. */
.tt-toast {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-space-8);
  border-radius: var(--tt-radius-sm);
  padding: var(--tt-space-8) var(--tt-space-16);
  font-size: var(--tt-fs-caption);
  box-shadow: var(--tt-shadow-2);
}
.tt-toast--success { background: var(--tt-color-text); color: var(--tt-color-text-invert); }
.tt-toast--success .tt-toast__icon { color: var(--tt-color-secondary); }
.tt-toast--error {
  background: var(--tt-color-bg);
  border: 1px solid var(--tt-color-danger);
  color: var(--tt-color-danger);
}
.tt-toast__icon svg { width: 16px; height: 16px; }

/* --- Skeleton loaders ------------------------------------------------------
   Never a bare spinner with no context — but where a shape can be shown
   instead of text ("Verifying payment…"), show the shape. */
@keyframes tt-skeleton-sheen {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.tt-skeleton {
  background: linear-gradient(90deg, var(--tt-color-surface) 25%, var(--tt-color-bg) 50%, var(--tt-color-surface) 75%);
  background-size: 200% 100%;
  animation: tt-skeleton-sheen 1.4s ease-in-out infinite;
  border-radius: var(--tt-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .tt-skeleton { animation: none; background: var(--tt-color-surface); }
}
.tt-skeleton--card-media { aspect-ratio: var(--tt-photo-aspect-card); border-radius: var(--tt-photo-radius) var(--tt-photo-radius) 0 0; }
.tt-skeleton--line { height: 10px; margin-block-end: var(--tt-space-8); }
.tt-skeleton--line:last-child { width: 60%; margin-block-end: 0; }

/* --- Loading with context (not a bare spinner) --------------------------- */
.tt-loading { display: flex; flex-direction: column; align-items: center; gap: var(--tt-space-12); padding: var(--tt-space-32); text-align: center; }
.tt-loading__spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--tt-color-border);
  border-block-start-color: var(--tt-color-primary);
  border-radius: 50%;
  animation: tt-spin 0.8s linear infinite;
}
@keyframes tt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tt-loading__spinner { animation-duration: 2s; } }
.tt-loading__label { font-size: var(--tt-fs-caption); color: var(--tt-color-text-soft); }

/* --- Empty state (honest, per Design System v2 §2 — never disguised) ----- */
.tt-empty {
  text-align: center;
  padding: var(--tt-space-48) var(--tt-space-24);
}
.tt-empty__icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--tt-space-16);
  background: var(--tt-color-surface);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--tt-photo-fallback-icon-color);
}
.tt-empty__icon svg { width: 24px; height: 24px; }
.tt-empty h3 { font-size: var(--tt-fs-h6); font-weight: var(--tt-fw-bold); margin: 0 0 var(--tt-space-4); }
.tt-empty p { font-size: var(--tt-fs-caption); color: var(--tt-color-text-soft); margin: 0 0 var(--tt-space-16); }

/* --- Error (specific and actionable, never "Something went wrong") ------- */
.tt-error {
  display: flex;
  gap: var(--tt-space-8);
  align-items: flex-start;
  background: color-mix(in srgb, var(--tt-color-danger) 6%, white);
  border: 1px solid color-mix(in srgb, var(--tt-color-danger) 30%, white);
  border-radius: var(--tt-radius-sm);
  padding: var(--tt-space-12) var(--tt-space-16);
  color: var(--tt-color-danger);
}
.tt-error svg { width: 18px; height: 18px; flex-shrink: 0; margin-block-start: 1px; }
.tt-error p { font-size: var(--tt-fs-caption); margin: 0; }

/* --- Modal (normal document flow, never position:fixed by default) ------- */
.tt-modal-overlay {
  background: rgba(17, 24, 39, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--tt-space-16);
}
.tt-modal {
  background: var(--tt-color-bg);
  border-radius: var(--tt-radius-lg);
  padding: var(--tt-space-24);
  max-width: 360px;
  width: 100%;
  box-shadow: var(--tt-shadow-3);
}
.tt-modal h3 { font-size: var(--tt-fs-h6); margin: 0 0 var(--tt-space-8); }
.tt-modal p { font-size: var(--tt-fs-caption); color: var(--tt-color-text-soft); margin: 0 0 var(--tt-space-16); }
.tt-modal__actions { display: flex; gap: var(--tt-space-8); justify-content: flex-end; }