/* ── Lesson layout ── */
.lesson-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 5rem;
  position: relative;
  z-index: 1;
}

/* Lesson header */
.lesson-hero {
  border-radius: var(--radius-xl);
  padding: 2rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  animation: fadeUp .4s ease;
}
.lesson-hero::after {
  content: attr(data-icon);
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 4rem;
  opacity: .15;
  pointer-events: none;
}
.lesson-hero .mod-tag {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .7;
  margin-bottom: .4rem;
}
.lesson-hero h1 {
  font-style: italic;
  font-weight: 300;
  color: inherit;
  margin-bottom: .5rem;
}
.lesson-hero .meta-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.meta-chip {
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: .18rem .75rem;
  font-size: .75rem;
  font-weight: 700;
}

/* Sections */
.lesson-section {
  background: white;
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 1.25rem;
  animation: fadeUp .45s ease both;
  box-shadow: var(--shadow-sm);
}
.section-head {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.section-head:hover { background: var(--surface); }
.section-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.section-title-text {
  font-weight: 700;
  font-size: .95rem;
  flex: 1;
}
.section-chevron {
  font-size: .7rem;
  color: var(--muted);
  transition: transform .25s;
}
.section-chevron.open { transform: rotate(90deg); }
.section-body {
  padding: 1.25rem 1.5rem;
  border-top: 1.5px solid var(--border);
  display: none;
}
.section-body.open { display: block; }

/* Big Idea box */
.big-idea {
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border-left: 4px solid var(--accent);
  background: var(--accent-l);
  animation: fadeUp .4s ease;
}
.big-idea-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .3rem;
}
.big-idea p { color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* Script box */
.script-box {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: .75rem;
  font-style: italic;
}

/* Age tip */
.age-tip {
  background: #E2F6EF;
  border: 1.5px solid #6FCFAD;
  border-radius: var(--radius-md);
  padding: .75rem 1rem;
  font-size: .85rem;
  color: #0B6E49;
  line-height: 1.6;
  margin-top: .75rem;
}

/* Prompt box */
.prompt-try {
  background: var(--ink);
  color: #A8E6CF;
  border-radius: var(--radius-md);
  padding: .85rem 1.1rem;
  font-family: var(--font-code);
  font-size: .82rem;
  line-height: 1.6;
  margin-bottom: .6rem;
  cursor: pointer;
  position: relative;
  transition: filter .15s;
}
.prompt-try::before {
  content: '▶  Try this →';
  position: absolute;
  top: -22px;
  left: 0;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-family: var(--font-body);
}
.prompt-try:hover { filter: brightness(1.15); }

/* Discuss box */
.discuss-box {
  background: #FAEEDA;
  border: 1.5px solid #FAC775;
  border-radius: var(--radius-md);
  padding: .75rem 1rem;
  font-size: .85rem;
  color: #633806;
  line-height: 1.6;
  margin-top: .75rem;
}

/* Code block */
.code-display {
  background: var(--ink);
  color: #e2e0f5;
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  font-family: var(--font-code);
  font-size: .82rem;
  line-height: 1.8;
  overflow-x: auto;
  margin: .75rem 0;
}
.code-display .kw  { color: #AFA9EC; }
.code-display .str { color: #A8E6CF; }
.code-display .cmt { color: #6b6888; font-style: italic; }
.code-display .num { color: #FAC775; }
.code-display .fn  { color: #85B7EB; }

/* Bug hunt */
.bug-span {
  background: #4A1E3A;
  color: #FF9580;
  border-radius: 4px;
  padding: 0 4px;
  cursor: pointer;
  text-decoration: underline dotted;
  transition: all .15s;
}
.bug-span:hover { background: #FF9580; color: var(--ink); }
.bug-span.found  { background: #1E3A2A; color: #6FCFAD; text-decoration: line-through; cursor: default; }

/* Wrap-up question */
.wrapup-q {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .75rem 1rem;
  background: var(--surface);
  border-radius: var(--radius-md);
  margin-bottom: .6rem;
  border: 1.5px solid var(--border);
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.wrapup-num {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Complete bar */
.complete-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: white;
  border-top: 2px solid var(--border);
  padding: .9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 200;
  box-shadow: 0 -4px 20px rgba(0,0,0,.07);
}
.complete-bar-left {
  font-size: .85rem;
  font-weight: 700;
  color: var(--muted);
}

/* Nav breadcrumb */
.lesson-nav {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.lesson-nav a { color: var(--accent); text-decoration: none; font-weight: 700; }
.lesson-nav a:hover { text-decoration: underline; }