/* ═══════════════════════════════════════════════════════
   Shared Lesson UI — lessons.css
   Generic selectors (no module prefix). Used by all modules.
════════════════════════════════════════════════════════ */

/* ── Mini-Lesson Card ── */
.lesson-card {
  max-width: 480px; margin: 0 auto; padding: var(--space-xl);
  background: linear-gradient(160deg, #1a1f4a, #0f1535);
  border: 2px solid rgba(79,172,254,.35); border-radius: var(--radius-xl);
  text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.4);
  animation: lesson-card-in .35s ease-out;
}
@keyframes lesson-card-in { from { opacity:0; transform: translateY(16px) scale(.97); } to { opacity:1; transform:none; } }

.lesson-head {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-sm); margin-bottom: var(--space-md);
}
.lesson-emoji { font-size: 2.4rem; line-height: 1; flex-shrink: 0; }
.lesson-title {
  font-family: var(--font-heading); font-size: 1.4rem; color: #4FACFE;
  margin: 0;
}
.lesson-visual {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg) var(--space-md);
  margin-bottom: var(--space-md);
  min-height: 120px;
}
.lesson-caption {
  font-size: 1.15rem; color: var(--color-text-muted);
  margin: 0 0 var(--space-lg); line-height: 1.4;
}
.lesson-start {
  padding: 12px 32px; border: none; border-radius: 50px; cursor: pointer;
  font-family: var(--font-heading); font-size: 1.15rem; color: #0A0E27;
  background: linear-gradient(135deg, #4FACFE, #00F2FE); box-shadow: 0 6px 20px rgba(79,172,254,.45);
}
.lesson-start:hover { transform: translateY(-2px); }

/* ── Visual Primitives (.lv-*) ── */
.lv {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 6px;
}

/* objects: flat row of emoji, with optional crossed items */
.lv-objects {
  flex-wrap: wrap; gap: 6px; justify-content: center;
}
.lv-objects .lv-item { font-size: 2rem; line-height: 1; }
.lv-objects .lv-crossed {
  font-size: 2rem; line-height: 1;
  opacity: .35;
  position: relative; display: inline-block;
  text-decoration: line-through;
}
.lv-obj-group {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  align-items: center; justify-content: center;
  padding: 6px 10px;
  background: rgba(255,255,255,.06); border-radius: 10px;
}
.lv-plus {
  font-size: 1.6rem; color: var(--color-accent, #FFE66D);
  font-family: var(--font-heading); line-height: 1; padding: 0 4px;
}

/* array: rows x cols grid of emoji */
.lv-array {
  flex-direction: column; gap: 4px;
}
.lv-array .lv-row {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
}
/* Scoped: emoji cells in array only */
.lv-array .lv-cell { font-size: 2rem; line-height: 1; }

/* groups: N groups of P items each */
.lv-groups {
  flex-wrap: wrap; gap: 10px; justify-content: center;
}
.lv-groups .lv-group {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  justify-content: center; padding: 8px 12px;
  background: rgba(79,172,254,.1);
  border: 1px solid rgba(79,172,254,.3); border-radius: 12px;
}
.lv-groups .lv-item { font-size: 2rem; line-height: 1; }

/* areagrid: W×H empty bordered squares */
.lv-areagrid {
  display: inline-grid; gap: 2px;
}
/* Scoped: square cells in areagrid only */
.lv-areagrid .lv-cell {
  width: 28px; height: 28px;
  background: rgba(79,172,254,.12);
  border: 1.5px solid rgba(79,172,254,.45);
  border-radius: 3px;
}

/* fraction, shape, angle, cube — inline SVG sizing */
.lv-fraction {
  width: 150px; height: auto; display: block; margin: 0 auto;
}
.lv-shape {
  width: 150px; height: auto; display: block; margin: 0 auto;
}
.lv-angle {
  width: 150px; height: auto; display: block; margin: 0 auto;
}
.lv-cube {
  width: 150px; height: auto; display: block; margin: 0 auto;
}

/* worked: column of step lines */
.lv-worked {
  flex-direction: column; gap: 4px; align-items: center;
}
.lv-line {
  font-family: var(--font-heading, monospace); font-size: 1.5rem;
  color: var(--color-text); letter-spacing: 2px;
  padding: 4px 12px; border-radius: 6px;
}
.lv-hi {
  background: rgba(79,172,254,.2);
  color: #4FACFE; font-weight: 700;
}

/* ── New visual types ── */

/* bigtext: large bold centered text with optional highlight span */
.lv-bigtext {
  font-size: 2.6rem; font-weight: 700; text-align: center;
  justify-content: center; line-height: 1.2;
  color: var(--color-text);
}

/* pair: two terms with a relation symbol between them */
.lv-pair {
  display: flex; flex-direction: row; align-items: center;
  justify-content: center; gap: 12px; font-size: 1.6rem;
  flex-wrap: nowrap;
}
.lv-pair-l, .lv-pair-r {
  color: var(--color-text);
}
.lv-pair-rel {
  color: var(--color-accent, #FFE66D); font-weight: 700;
}

/* swatch: row of colour chips with optional label */
.lv-swatch {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; align-items: center;
}
.lv-swatch-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 10px;
  border: 2px solid rgba(255,255,255,.25);
  font-size: 0.7rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6);
  font-family: var(--font-body); font-weight: 600;
  overflow: hidden;
}

/* ── Wrong-answer teaching feedback ── */
.feedback-explain { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:8px; }
.fx-answer { font-size:1.15rem; color: var(--color-text); }
.fx-op { font-family: ui-monospace, monospace; font-size:1.4rem; font-weight:700; color:#4FACFE; background:rgba(79,172,254,.12); padding:4px 14px; border-radius:10px; }
.fx-reminder { font-size:1rem; color: var(--color-text-muted, #c9c9d4); max-width:360px; text-align:center; }
.feedback-continue { margin-top:6px; padding:10px 26px; border:none; border-radius:50px; cursor:pointer; font-family: var(--font-heading); font-size:1.05rem; color:#0A0E27; background:linear-gradient(135deg,#4FACFE,#00F2FE); box-shadow:0 6px 18px rgba(79,172,254,.4); }
.feedback-continue:hover { transform: translateY(-2px); }

/* ── 🔊 Narration button (delegated; hidden when TTS unsupported) ── */
.speak-btn {
  background: transparent; border: none; cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: 2px 6px;
  opacity: .8; transition: transform .15s, opacity .15s;
}
.speak-btn:hover { opacity: 1; transform: scale(1.15); }
.no-tts .speak-btn { display: none; }

/* ── Unit path map (✓ done → active → 🔒 locked) ── */
.unit-map { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.um-node {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: .8rem; font-weight: 700; color: #0A0E27;
  background: rgba(255,255,255,.15);
}
.um-node.um-done   { background: linear-gradient(135deg, #43E97B, #38F9D7); }
.um-node.um-active { background: linear-gradient(135deg, #4FACFE, #00F2FE); animation: um-pulse 1.6s ease-in-out infinite; }
.um-node.um-locked { background: rgba(255,255,255,.10); color: rgba(255,255,255,.45); font-size: .7rem; }
.um-link { width: 12px; height: 2px; background: rgba(255,255,255,.25); border-radius: 1px; }
@keyframes um-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(79,172,254,.5); } 50% { box-shadow: 0 0 0 5px rgba(79,172,254,0); } }

/* ── Premium unit nodes and banner ── */
.um-node.um-premium { background: linear-gradient(135deg, #c084fc, #818cf8); font-size: .7rem; }
.premium-banner { text-align: center; color: #c084fc; font-family: var(--font-heading); font-size: 1rem; margin: 6px 0; }