/**
 * Wrench-Time Tutorial Stripper — Custom styles
 * UI Implementer owns this file.
 * Keep minimal — Tailwind handles most layout and theming.
 */

/* Fallback: ensure .hidden works even if Tailwind CDN fails to load */
.hidden { display: none !important; }

/* ── Spinning wrench loading animation ─────────────────────────────────────── */
@keyframes wt-wrench-spin {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(15deg) scale(1.05); }
  50%  { transform: rotate(0deg) scale(1); }
  75%  { transform: rotate(-15deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

.wt-spin-wrench {
  display: inline-block;
  animation: wt-wrench-spin 0.8s ease-in-out infinite;
  transform-origin: center;
}

/* ── Tab styles ─────────────────────────────────────────────────────────────── */

.wt-tab {
  border-color: transparent;
  color: #64748b; /* slate-500 */
  cursor: pointer;
  outline: none;
}

.wt-tab:focus-visible {
  outline: 2px solid #f59e0b; /* amber-500 */
  outline-offset: -2px;
  border-radius: 4px;
}

.wt-tab-active {
  border-color: #f59e0b; /* amber-500 */
  color: #92400e; /* amber-800 */
}

@media (prefers-color-scheme: dark) {
  .wt-tab {
    color: #94a3b8; /* slate-400 */
  }
  .wt-tab-active {
    border-color: #f59e0b;
    color: #fde68a; /* amber-200 */
  }
}

/* Dark mode overrides via class (takes priority over media query) */
.dark .wt-tab {
  color: #94a3b8;
}

.dark .wt-tab-active {
  border-color: #f59e0b;
  color: #fde68a;
}

.wt-tab-inactive {
  border-color: transparent;
}

/* ── Timeline connector spacing fix ────────────────────────────────────────── */

/* Ensure last step has no bottom padding gap */
#steps-timeline > li:last-child > div:first-child > div:last-child {
  display: none;
}

/* ── Smooth section transitions ─────────────────────────────────────────────── */

#results-section,
#loading-section,
#rate-limit-section,
#auth-required-section,
#error-section {
  animation: wt-fade-in 0.2s ease-out;
}

@keyframes wt-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile: ensure tap targets are large enough ────────────────────────────── */

@media (max-width: 640px) {
  #extract-form button[type="submit"] {
    width: 100%;
    justify-content: center;
  }

  /* Timestamp links bigger tap target on mobile */
  a[href*="youtube.com"][href*="&t="] {
    padding: 0.5rem 0.75rem;
  }
}

/* ── Modal focus trap hint ──────────────────────────────────────────────────── */

#byok-modal:not(.hidden) {
  animation: wt-fade-in 0.15s ease-out;
}

/* ── Upgrade banner slide-in from bottom ─────────────────────────────────── */

@keyframes wt-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.wt-upgrade-banner {
  animation: wt-slide-up 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Upgrade modal fade-in ──────────────────────────────────────────────────── */

#upgrade-modal:not(.hidden) {
  animation: wt-fade-in 0.15s ease-out;
}

/* ── Pro upgrade toast ───────────────────────────────────────────────────────── */

@keyframes wt-toast-in {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

#upgrade-toast:not(.hidden) {
  animation: wt-toast-in 0.25s ease-out both;
}

/* ── Reduce motion preference ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .wt-spin-wrench {
    animation: none;
  }
  #results-section,
  #loading-section,
  #rate-limit-section,
  #auth-required-section,
  #error-section,
  #byok-modal:not(.hidden),
  #upgrade-modal:not(.hidden),
  #upgrade-toast:not(.hidden),
  .wt-upgrade-banner {
    animation: none;
  }
}