/* style.css
   Minimal custom styles to complement Tailwind
   (keeps file tiny; Tailwind handles most styling)
*/

:root {
  --teal-600: #0b766e;
  --teal-50: #f0fdfa;
}

/* Body font fallback already loaded via Google Fonts */
body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

/* Radio option styling */
.option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(11,118,110,0.02), rgba(11,118,110,0.01));
  cursor: pointer;
  font-size: 0.94rem;
  color: #0f172a;
}
.option input[type="radio"],
.option input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--teal-600);
}

/* Hover/focus */
.option:hover { box-shadow: 0 1px 0 rgba(2,6,23,0.04); transform: translateY(-1px); transition: all 0.12s ease; }
.option:has(input:checked) { border-color: rgba(11,118,110,0.12); background: rgba(11,118,110,0.03); }

/* Result icon sizing */
#resultIcon svg { width: 72px; height: 72px; }

/* Progress bar for percentages */
.progress-wrap {
  background: linear-gradient(90deg, rgba(11,118,110,0.06), rgba(11,118,110,0.02));
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
}
.progress {
  height: 100%;
  background: linear-gradient(90deg, rgba(11,118,110,0.95), rgba(15,153,129,0.9));
  border-radius: 999px;
  transition: width 380ms ease;
}

/* Responsive tweaks */
@media (max-width: 640px) {
  #resultIcon { width: 84px; height: 84px; }
  .option { font-size: 0.9rem; }
}