/* ZARKS — small custom styles on top of Tailwind */

html { scroll-behavior: smooth; }
body { font-family: "Inter", system-ui, sans-serif; }

/* Use Inter for headings too and cap the weight so nothing
   looks cartoonishly thick. */
.font-display { font-family: "Inter", system-ui, sans-serif !important; letter-spacing: -0.01em; }
.font-black, .font-extrabold { font-weight: 700 !important; }

/* line clamp helpers (in case CDN build lacks the plugin) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* range slider accent */
input[type="range"] { accent-color: #ff8a00; }

/* keep native <select> dropdown option text readable (was greyed on some
   browsers in dark mode) */
select { color-scheme: light dark; }
select option { color: #0f172a; background: #ffffff; }

/* fade-in for grids */
@keyframes zark-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
[id$="-grid"] > * { animation: zark-fade 0.4s ease both; }

/* toast slide-in/out */
@keyframes zark-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes zark-toast-out { to { opacity: 0; transform: translateX(20px); } }
.zark-toast-in { animation: zark-toast-in 0.25s ease both; }
.zark-toast-out { animation: zark-toast-out 0.3s ease both; }

/* pulsing dot for "verifying" states */
@keyframes zark-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.zark-dot { display:inline-block; width:6px; height:6px; border-radius:9999px; background:#f59e0b; animation: zark-pulse 1.2s ease-in-out infinite; }

/* simple spinner for the verification step */
@keyframes zark-spin { to { transform: rotate(360deg); } }
.zark-spinner {
  width: 3.5rem; height: 3.5rem; border-radius: 9999px;
  border: 4px solid rgba(255, 138, 0, 0.2);
  border-top-color: #ff8a00;
  animation: zark-spin 0.9s linear infinite;
}