/* ============================================================
   AI Learning Workspace — components shared by lessons,
   materials, reference cards and the curriculum page.

   Layered on top of lesson.css, which owns the palette, the
   typography and the core components (.box, .sidenote, .footer,
   .source, tables, quiz, recall, tally). Everything here is
   additional and uses lesson.css custom properties only — no new
   colours, so light/dark and print all follow the shared sheet.

   Every page that uses .box-label, .objective or .quote-said
   must link this file. Lesson 1 originally inlined these styles
   because they lived in curriculum.css, which lessons don't
   link; that is what this file exists to fix.
   ============================================================ */

/* ---------- Callout labels --------------------------------
   Sits inside lesson.css's .box, replacing the usual <h4>.
   Used for exercises ("Hands-on · Tier A → B"), specimens,
   and misconception callouts.
----------------------------------------------------------- */

.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); }

/* The tier marker inside a box label, e.g. "Tier A → B" */
.box-label em {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

/* ---------- Learning objective / what-to-do block ---------- */

.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;
}

/* .plain drops the prefix — for "what to do about it" blocks
   inside a lesson body, where the label would be wrong. */
.objective.plain::before { content: none; }
.objective.plain { border-left-color: var(--accent); }

/* ---------- A misconception in the learner's own voice ----- */

.quote-said {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

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

@media print {
  .objective { break-inside: avoid; page-break-inside: avoid; }
}