/*
 * css/snapconvert.css
 * ---------------------------------------------------------------------------
 * The handful of rules Tailwind utilities cannot express: range input parts,
 * the drag state, scrollbars, the FAQ accordion and motion preferences.
 * Shared by index.html and every tool subpage.
 * ---------------------------------------------------------------------------
 */

/* Small amount of hand-written CSS for things Tailwind utilities can't
   express cleanly: the range track, scrollbars and motion preferences. */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Range slider ------------------------------------------------------- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: #1E2430;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -5px;
  height: 16px;
  width: 16px;
  border-radius: 999px;
  background: #7C5CFF;
  border: 2px solid #0B0D12;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.25);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: #1E2430;
}
input[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border: 2px solid #0B0D12;
  border-radius: 999px;
  background: #7C5CFF;
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.45);
}

/* Ambient background wash -------------------------------------------- */
.bg-aurora {
  background-image:
    radial-gradient(60rem 30rem at 50% -10%, rgba(124, 92, 255, 0.16), transparent 60%),
    radial-gradient(40rem 24rem at 90% 10%, rgba(52, 211, 153, 0.08), transparent 60%);
}

/* Dropzone drag state. app.js toggles the .is-dragging class. */
#dropzone.is-dragging {
  border-color: #7C5CFF;
  background-color: rgba(124, 92, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.35), 0 12px 40px -12px rgba(124, 92, 255, 0.45);
}

/* Thin scrollbars inside the results list ---------------------------- */
.scroll-slim::-webkit-scrollbar { width: 10px; }
.scroll-slim::-webkit-scrollbar-track { background: transparent; }
.scroll-slim::-webkit-scrollbar-thumb {
  background: #1E2430;
  border-radius: 999px;
  border: 3px solid #0B0D12;
}

/* FAQ accordion. Native <details> keeps the answers in the DOM for
   crawlers while staying keyboard accessible without any JS. */
.faq-item > summary { list-style: none; cursor: pointer; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}