/* ============================================================ */
/* Trancy Mascot Studio — minimal extras                        */
/* (everything else is Tailwind utilities inline in markup)     */
/* ============================================================ */

/* Active nav tab — purple underline that grows from center.
   Tailwind's `aria-current` variant handles color; the underline
   needs ::after so we keep it here. */
.nav-tab::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  height: 2px;
  width: 0;
  background-color: #7B2FBE;
  transform: translateX(-50%);
  border-radius: 2px 2px 0 0;
  transition: width 200ms ease;
}
.nav-tab[aria-current="page"]::after { width: 70%; }

/* Settings gear hover rotation */
.settings-btn:hover svg { transform: rotate(60deg); }

/* Transparent-bg checker pattern (used for result + preview tiles). */
.checker {
  background-image:
    linear-gradient(45deg, #f3f4f6 25%, transparent 25%),
    linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f3f4f6 75%),
    linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

/* Modal entrance animation. */
.modal-backdrop { animation: backdrop-in 180ms ease-out; }
.modal-card     { animation: modal-in 200ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* Toast slide-in / out. */
.toast-item {
  pointer-events: auto;
  animation: toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.toast-item.is-leaving { animation: toast-out 180ms ease-in forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(8px, 4px); }
  to   { opacity: 1; transform: translate(0, 0);     }
}
@keyframes toast-out {
  from { opacity: 1; transform: translate(0, 0); }
  to   { opacity: 0; transform: translate(8px, 4px); }
}

/* Shimmer loading state for result cards. */
.shimmer {
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: shimmer-sweep 1.4s ease-in-out infinite;
}
@keyframes shimmer-sweep {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* Subtle custom scrollbar for the presets card and modals. */
.custom-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.22); }

/* Hide default <details> marker so we can render our own chevron. */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }