/* ===== Word Focus Lab — Global Styles ===== */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Body defaults */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a3a3a3; }

/* Selection color */
::selection { background: rgba(12, 147, 229, 0.15); color: #054e83; }

/* Focus ring */
*:focus-visible { outline: 2px solid #0c93e5; outline-offset: 2px; border-radius: 4px; }

/* Tabular numbers */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* FAQ animations */
.faq-item .faq-toggle i { transition: transform 0.3s ease; }
.faq-item.open .faq-toggle i { transform: rotate(180deg); }
.faq-item.open .faq-answer { display: block !important; }

/* Page fade-in */
main { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Progress bar */
#progressBar, #overallProgress { transition: width 0.3s ease; }

/* Timer circle */
#timerCircle, #readabilityCircle, #scoreCircle { transition: stroke-dashoffset 1s linear, stroke 0.5s ease; }

/* Typing text display — ensure text fits and wraps properly */
#textDisplay, #lessonTextDisplay {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.8;
}

/* Non-breaking space visibility in typing display */
#textDisplay span, #lessonTextDisplay span {
  display: inline;
}

/* Textarea focus glow */
textarea:focus { box-shadow: 0 0 0 3px rgba(12, 147, 229, 0.1); }

/* Chart responsive */
canvas { max-width: 100%; }

/* Mobile menu */
#mobileMenu { transition: max-height 0.3s ease; }

/* Shake animation for reset-on-mistake */
@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
}
.shake-error {
  animation: shakeError 0.4s ease;
  border-color: #ef4444 !important;
}

/* Cursor blink for typing display */
@keyframes cursorBlink {
  0%, 100% { border-color: #0c93e5; }
  50% { border-color: transparent; }
}

/* Mobile touch targets — make buttons at least 44px */
@media (max-width: 640px) {
  .timer-btn, .diff-btn, .mode-btn, .gmode-btn, .prompt-btn, .phase-btn {
    min-height: 36px;
    min-width: 36px;
  }

  /* Stack controls vertically on very small screens */
  .faq-toggle { min-height: 48px; }

  /* Reduce font-mono size on small screens for typing text */
  #textDisplay, #lessonTextDisplay {
    font-size: 0.8rem;
    line-height: 1.7;
    letter-spacing: -0.01em;
  }

  /* Make typing input comfortable on mobile */
  #typingInput, #lessonInput, #grammarInput {
    font-size: 16px !important; /* Prevents iOS zoom */
  }

  /* Engagement cards: full-width on mobile */
  .engagement-card {
    min-height: 140px;
  }
}

/* Medium breakpoint adjustments */
@media (min-width: 641px) and (max-width: 1023px) {
  #textDisplay, #lessonTextDisplay {
    font-size: 0.95rem;
    line-height: 1.85;
  }
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #f5f5f5 25%, #e5e5e5 50%, #f5f5f5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Print styles */
@media print {
  header, footer, .no-print { display: none !important; }
  main { padding: 0 !important; }
}

/* Safe area for notched devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* Toggle switch transition */
#resetOnMistakeIndicator { transition: background-color 0.2s ease; }
#resetOnMistakeDot { transition: transform 0.2s ease; }