/* mockup-shared.css — shared styles for the system mockups */
/* Includes the mockup-toast pattern + avatar gradient classes (used across surfaces). */

/* Avatar gradients — applied to .*-avatar elements (curator-avatar, big-avatar, etc.) */
/* Use !important to override any per-file hardcoded gradients on the same element. */
.av-1 { background: linear-gradient(135deg, #2d5a3a, #5c8266) !important; }
.av-2 { background: linear-gradient(135deg, #4a3850, #7a5282) !important; }
.av-3 { background: linear-gradient(135deg, #2d3a50, #4c5875) !important; }
.av-4 { background: linear-gradient(135deg, #5a2810, #b85730) !important; }
.av-5 { background: linear-gradient(135deg, #5c0f0f, #8c1a1a) !important; }
.av-6 { background: linear-gradient(135deg, #3d2d0e, #6b5020) !important; }
.av-7 { background: linear-gradient(135deg, #1a3d24, #2d5a3a) !important; }
.av-8 { background: linear-gradient(135deg, #2a1a30, #6b4878) !important; }

.mockup-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--surface);
  padding: 14px 22px;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  border-left: 3px solid var(--accent);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  max-width: 460px;
  box-shadow: 0 8px 24px rgba(15, 30, 53, 0.25);
}
.mockup-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}
.mockup-toast .mt-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--accent-soft);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid rgba(250, 251, 252, 0.25);
}