/* ============================================================
   TYPINGAURA — lessons.css  (v2)
   Fix: .lesson-panel hidden by default, shown via .active class.
   Removed inline style="display:none" dependency from HTML.
   ============================================================ */

#lessons-mode { display:none; flex-direction:column; gap:var(--space-8); align-items:center; max-width:var(--content-width); margin:0 auto; }
#lessons-mode.active { display:flex; }

/* LEVEL SELECTOR */
.lesson-levels { width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); }

.level-card {
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl); padding:var(--space-5); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow   var(--dur-fast) var(--ease-out),
             transform    var(--dur-fast) var(--ease-spring);
  text-align:center;
}
.level-card:hover  { border-color:var(--border-active); box-shadow:0 0 20px rgba(0,229,255,0.05); transform:translateY(-2px); }
.level-card.active { border-color:var(--neon-cyan); box-shadow:0 0 20px rgba(0,229,255,0.1); }
.level-card.locked { opacity:0.4; cursor:not-allowed; pointer-events:none; }

.level-number { font-family:var(--font-mono); font-size:var(--text-2xl); font-weight:700; color:var(--neon-cyan); text-shadow:var(--glow-cyan); margin-bottom:var(--space-1); }
.level-name   { font-size:var(--text-sm); font-weight:600; color:var(--text-primary); margin-bottom:var(--space-2); }
.level-desc   { font-size:var(--text-xs); color:var(--text-secondary); line-height:var(--leading-normal); }
.level-progress { margin-top:var(--space-3); display:flex; gap:3px; justify-content:center; flex-wrap:wrap; }
.level-dot      { width:8px; height:8px; border-radius:var(--radius-full); background:var(--bg-elevated); border:1px solid var(--border-normal); }
.level-dot.done { background:var(--neon-cyan); border-color:var(--neon-cyan); box-shadow:0 0 4px var(--neon-cyan); }

/* LESSON PANEL
   Default: hidden. Shown by adding .active class via JS.
   This replaces the old inline style="display:none" in HTML.
*/
.lesson-panel {
  display:none;
  width:100%;
  background:var(--bg-surface);
  border:1px solid var(--border-normal);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
  animation:slideUp var(--dur-normal) var(--ease-out) forwards;
}
.lesson-panel.active { display:block; }

.lesson-panel__header  { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-5); }
.lesson-title          { font-size:var(--text-lg); font-weight:700; color:var(--text-primary); }
.lesson-step-badge     { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-secondary); background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:var(--radius-full); padding:var(--space-1) var(--space-3); }
.lesson-instruction    { font-size:var(--text-base); color:var(--text-secondary); line-height:var(--leading-loose); margin-bottom:var(--space-5); }

.lesson-progress-bar  { height:4px; background:var(--bg-elevated); border-radius:var(--radius-full); overflow:hidden; margin-bottom:var(--space-5); }
.lesson-progress-fill { height:100%; background:var(--neon-cyan); box-shadow:0 0 6px var(--neon-cyan); border-radius:var(--radius-full); transition:width 400ms var(--ease-out); }

.lesson-hint {
  margin-top:var(--space-4); padding:var(--space-3) var(--space-4);
  background:rgba(255,204,0,0.06); border:1px solid rgba(255,204,0,0.15);
  border-radius:var(--radius-lg); font-size:var(--text-sm); color:var(--neon-gold);
  display:flex; align-items:center; gap:var(--space-2);
  opacity:0; transition:opacity var(--dur-normal) var(--ease-out);
  min-height:0;
}
.lesson-hint.visible { opacity:1; }

/* FINGER GUIDE */
.finger-guide { width:100%; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); padding:var(--space-5); display:flex; flex-direction:column; align-items:center; gap:var(--space-4); }
.finger-guide__title { font-size:var(--text-sm); font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.08em; }
#finger-diagram { width:100%; max-width:400px; height:auto; }
.finger-left  { fill:var(--neon-blue);  opacity:0.3; transition:opacity var(--dur-normal) var(--ease-out); }
.finger-right { fill:var(--neon-cyan);  opacity:0.3; transition:opacity var(--dur-normal) var(--ease-out); }
.finger-active { opacity:0.85 !important; filter:drop-shadow(0 0 4px currentColor); }
.finger-legend { display:flex; gap:var(--space-6); font-size:var(--text-xs); color:var(--text-secondary); }
.legend-item   { display:flex; align-items:center; gap:var(--space-1); }
.legend-dot    { width:10px; height:10px; border-radius:var(--radius-full); }
.legend-dot--left  { background:var(--neon-blue); }
.legend-dot--right { background:var(--neon-cyan); }