/* Subject Genie — supplementary styles layered on top of Tailwind CDN. */

html {
  scroll-behavior: smooth;
}

/* Stagger reveal for results — JS adds .reveal--N classes. */
.subject-card {
  opacity: 0;
  transform: translateY(8px);
  animation: reveal 0.32s ease-out forwards;
}
@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.subject-card.delay-0 { animation-delay: 0ms; }
.subject-card.delay-1 { animation-delay: 50ms; }
.subject-card.delay-2 { animation-delay: 100ms; }
.subject-card.delay-3 { animation-delay: 150ms; }
.subject-card.delay-4 { animation-delay: 200ms; }
.subject-card.delay-5 { animation-delay: 250ms; }
.subject-card.delay-6 { animation-delay: 300ms; }
.subject-card.delay-7 { animation-delay: 350ms; }
.subject-card.delay-8 { animation-delay: 400ms; }
.subject-card.delay-9 { animation-delay: 450ms; }

/* Hide arrows on number-like inputs (none here, future-proof). */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Length badge colors. */
.len-ok { color: #16a34a; }
.len-warn { color: #d97706; }
.len-bad { color: #dc2626; }
.dark .len-ok { color: #4ade80; }
.dark .len-warn { color: #fbbf24; }
.dark .len-bad { color: #f87171; }

/* Spam warning underline. */
.spam-flag {
  text-decoration: underline wavy #dc2626;
  text-underline-offset: 3px;
}

/* Reduce CLS for fonts. */
body { font-display: swap; }