/* =========================================================================
   Modeling Designer — shared lesson-page chrome
   Used by 3D Design and Blender, whose lessons are the same shape: four
   taught levels then Project / Robotics / Game Basis as levels 5-7.

   WHY ONE FILE FOR TWO COURSES. Godot and WebApp each carry a private copy of
   this chrome — godot_styles.css says so at the top, "Mirrors
   public/webapp/webapp_styles.css". That is two copies of the same 180 lines
   already, and adding two more for the Modeling Designer pair would make four.
   These two courses are defined as one shape in MODELING_TABS, so they share
   one stylesheet and each keeps only its own accents.

   Folding Godot and WebApp in here is the obvious tidy-up, and deliberately
   NOT done as part of adding a course: it would put two live courses' styling
   at risk for a change that has nothing to do with them.

   The accent comes from a per-level class on the page root — .level--3d5,
   .level--bl5 and so on — set by each level's layout.tsx and defined in that
   course's own stylesheet. Both are linked by the layout, this one first.
   ========================================================================= */

.lesson-page {
  --accent:       #1477D1;   /* overridden per level by the course sheet */
  --accent-deep:  #0F5DA8;
  --accent-soft:  #EFF6FF;
  --accent-edge:  #BFDBFE;
  --ink:          #0F172A;
  --muted:        #64748B;
  --border:       #E2E8F0;

  color: var(--ink);
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- hero ---------- */

.lesson-hero {
  background: linear-gradient(135deg, var(--accent-soft) 0%, #fff 100%);
  border-bottom: 1px solid var(--border);
  padding: 32px 24px 36px;
}
.lesson-hero__inner { max-width: 820px; margin: 0 auto; }
.lesson-hero__crumbs { font-size: 0.85rem; color: var(--muted); margin: 0 0 16px; }
.lesson-hero__crumbs a { color: var(--accent-deep); text-decoration: none; }
.lesson-hero__crumbs a:hover { text-decoration: underline; }
.lesson-hero__crumbs .sep { margin: 0 8px; color: var(--accent-edge); }
.lesson-hero__crumbs .here { color: var(--ink); font-weight: 600; }

.lesson-hero__num {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  background: #fff;
  border: 1px solid var(--accent-edge);
  border-radius: 999px;
  padding: 4px 12px;
}
.lesson-hero__title {
  margin: 12px 0 8px;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.lesson-hero__sub {
  margin: 0 0 16px;
  font-size: 1.05rem;
  color: #334155;
  max-width: 620px;
  line-height: 1.55;
}
.lesson-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lesson-hero__meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
}

/* ---------- body shell ---------- */

.lesson-body {
  flex: 1;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: grid;
  gap: 28px;
}

.lesson-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.lesson-section__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-edge);
}
.lesson-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  background: var(--accent-deep);
  border-radius: 50%;
  flex-shrink: 0;
}
/* Basic and Extra have no number, so their badge carries a word instead. */
.lesson-section__num--wide {
  width: auto;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lesson-section__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  flex: 1;
  min-width: 0;
}
.lesson-section__time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-deep);
  background: #fff;
  border: 1px solid var(--accent-edge);
  border-radius: 6px;
  padding: 3px 10px;
  white-space: nowrap;
}

.lesson-section__body { padding: 22px; line-height: 1.65; color: #1E293B; }
.lesson-section__body > * + * { margin-top: 14px; }
.lesson-section__body p { margin: 0; }
.lesson-section__body h3 {
  margin: 22px 0 10px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}
.lesson-section__body h4 {
  margin: 14px 0 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.lesson-section__body ul,
.lesson-section__body ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.lesson-section__body li { line-height: 1.55; }
.lesson-section__body strong { color: var(--ink); }
.lesson-section__body a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lesson-section__body code {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: #F1F5F9;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
}
.lesson-section__body kbd {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82em;
  background: #fff;
  border: 1px solid #CBD5E1;
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
}
.lesson-section__body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* A pulled-out aside: the thing that goes wrong, or the thing worth knowing. */
.lesson-note {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  font-size: 0.95rem;
}
.lesson-note strong { color: var(--accent-deep); }

/* The outcome list at the top of every lesson. */
.lesson-outcomes { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.lesson-outcomes li::marker { color: var(--accent); }

@media (max-width: 640px) {
  .lesson-hero { padding: 24px 16px 28px; }
  .lesson-hero__title { font-size: 1.8rem; }
  .lesson-body { padding: 24px 16px 48px; gap: 20px; }
  .lesson-section__head { padding: 14px 16px; gap: 10px; }
  .lesson-section__body { padding: 16px; }
}