/* =====================================================================
   LinguaLift – plain CSS that Tailwind utilities cannot express cleanly.
   Component classes built with @apply (.card, .btn-*, .input, .chip,
   .option, .nav-link…) live in the inline <style type="text/tailwindcss">
   block in index.html, because the Tailwind CDN only compiles @apply
   directives from inline blocks, never from external stylesheets.
   ===================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Scrollbars ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(148 163 184 / 0.5) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgb(148 163 184 / 0.5); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Focus ring (accessible, consistent) ---------- */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* ---------- Skeleton shimmer ---------- */
.skeleton {
  border-radius: 0.75rem;
  background-color: rgb(226 232 240 / 0.7);
  background-image: linear-gradient(90deg, transparent 0, rgb(255 255 255 / 0.35) 40%, transparent 80%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}
.dark .skeleton {
  background-color: rgb(30 41 59);
  background-image: linear-gradient(90deg, transparent 0, rgb(255 255 255 / 0.06) 40%, transparent 80%);
}
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ---------- Flashcard 3D flip ---------- */
.flashcard-scene { perspective: 1400px; }
.flashcard {
  position: relative;
  width: 100%;
  min-height: 340px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.flashcard.flipped { transform: rotateY(180deg); }
.flashcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}
.flashcard-back { transform: rotateY(180deg); }

/* ---------- Progress ring (SVG) ---------- */
.ring-track { stroke: rgb(226 232 240); }
.dark .ring-track { stroke: rgb(30 41 59); }
.ring-value {
  stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* ---------- Reading passage typography ---------- */
.passage {
  font-size: 15px;
  line-height: 1.75rem;
  color: rgb(51 65 85);
}
.dark .passage { color: rgb(226 232 240); }
.passage p { margin-bottom: 1rem; }
.passage p:first-child::first-letter {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  float: left;
  margin-right: 0.5rem;
  margin-top: 0.25rem;
  color: rgb(79 70 229);
}
.dark .passage p:first-child::first-letter { color: rgb(129 140 248); }

/* ---------- Timer states ---------- */
.timer-warning { color: rgb(217 119 6); }
.dark .timer-warning { color: rgb(251 191 36); }
.timer-danger { color: rgb(225 29 72); animation: pulse 1s ease-in-out infinite; }
.dark .timer-danger { color: rgb(251 113 133); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* ---------- Decorative ---------- */
.hero-glow {
  background-image: radial-gradient(1200px 400px at 10% -20%, rgb(99 102 241 / 0.25), transparent 60%),
                    radial-gradient(800px 300px at 90% 0%, rgb(16 185 129 / 0.18), transparent 60%);
}
.dark .hero-glow {
  background-image: radial-gradient(1200px 400px at 10% -20%, rgb(99 102 241 / 0.35), transparent 60%),
                    radial-gradient(800px 300px at 90% 0%, rgb(16 185 129 / 0.2), transparent 60%);
}
.streak-flame { filter: drop-shadow(0 0 10px rgb(249 115 22 / 0.6)); }

/* <details> marker */
summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  nav, .no-print { display: none !important; }
}