/* ============================================================
   AI Learning Workspace — curriculum-page components

   Layered on top of lesson.css, which owns the palette, the
   typography and the shared components (.box, .sidenote,
   .footer, .source, tables). Everything here is specific to
   the curriculum design document: module headers, learning
   objectives, the dependency spine, and the labelled callouts
   that mark a misconception, an exercise or a self-check.

   Uses lesson.css custom properties only — no new colours, so
   light/dark and print all follow the shared stylesheet.
   ============================================================ */

/* ---------- Module headers -------------------------------- */

.module-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.7rem;
  margin: 3.4rem 0 0.3rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--ink);
}

.module-num {
  font-family: ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: normal;
  color: var(--accent);
  white-space: nowrap;
}

.module-head h2 {
  border: 0;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}

.module-head .duration {
  font-family: ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 0.75rem;
  font-variant-numeric: normal;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ---------- Learning objective ---------------------------- */

.objective {
  border-left: 2px solid var(--rule);
  padding: 0.15rem 0 0.15rem 1rem;
  margin: 1rem 0 1.5rem;
  color: var(--ink-soft);
}

.objective::before {
  content: "By the end, the learner can";
  display: block;
  font-family: ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-variant-numeric: normal;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
}

.objective.plain::before { content: none; }

/* ---------- Callout labels -------------------------------- */
/* Sits inside lesson.css's .box, replacing the usual <h4>. */

.box-label {
  display: block;
  font-family: ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: normal;
  color: var(--ink-faint);
  margin-bottom: 0.55rem;
}

.box-warn  .box-label { color: var(--accent); }
.box-drill .box-label { color: var(--accent); }
.box-key   .box-label { color: var(--accent-2); }

/* Something a learner said, or believes — quoted misconceptions. */
.quote-said {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

/* ---------- Dependency spine ------------------------------ */

.spine {
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
  font-family: ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 0.87rem;
  font-variant-numeric: normal;
  line-height: 1.55;
}

.spine li {
  position: relative;
  margin: 0;
  padding: 0 0 1.05rem 1.6rem;
  border-left: 2px solid var(--rule);
}

.spine li::before {
  content: "";
  position: absolute;
  left: -0.42rem;
  top: 0.4rem;
  width: 0.66rem;
  height: 0.66rem;
  border-radius: 50%;
  background: var(--accent);
}

.spine li:last-child { border-left-color: transparent; }

/* ---------- Print ----------------------------------------- */

@media print {
  .module-head { break-after: avoid; page-break-after: avoid; }
  .spine, .objective { break-inside: avoid; page-break-inside: avoid; }
}