/* ==========================================================================
   VibeCode 101 — Shared JS-triggered components
   This file ONLY contains:
   - Theme persistence (uses [data-theme] attribute from theme.css)
   - Lesson progress tracker + done mark
   - Quiz widget boot (used by lesson-page.css components)
   
   All visual tokens + layout components live in theme.css
   All lesson-specific components live in lesson-page.css
   ========================================================================== */

/* Theme toggle button (small inline style for lessons) */
.theme-toggle{
  appearance:none;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:999px;
  width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;color:var(--ink-2);
  transition:all .2s ease;
}
.theme-toggle:hover{border-color:var(--pink-300);transform:rotate(15deg)}

/* Done badge (set by JS) */
.done-mark{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.done-mark.newly-set{animation:pop .5s cubic-bezier(.2,.7,.2,1)}
@keyframes pop{0%{transform:scale(0.6)}50%{transform:scale(1.15)}100%{transform:scale(1)}}

/* Theme transition (instant flip for performance) */
html[data-theme="dark"] body{transition:none}

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